diff --git a/docs/stylesheets/custom.css b/docs/stylesheets/custom.css
index 58405c0..c39bed0 100644
--- a/docs/stylesheets/custom.css
+++ b/docs/stylesheets/custom.css
@@ -1,8 +1,9 @@
 .default-bg {
   background: none!important;
-  background-color:hsla(232,15%,21%,1)!important; 
+  background-color: var(--md-default-bg-color)!important; 
 }
 
+
 .content-container-centered {
   padding: 5.2rem 0;
   margin: 0 0.8rem;
@@ -29,7 +30,7 @@
 }
 
 .centered-content-grid ul.centered-content-grid__list > li.centered-content-grid__item  div.item_content{
-  color: hsla(232,75%,95%,1)!important;
+  color: var(--md-typeset-color)!important;
 }
 
 
diff --git a/mkdocs.yml b/mkdocs.yml
index 0d985dc..e197f2c 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -9,9 +9,20 @@ theme:
   name: material
   custom_dir: material
   palette:
-    scheme: slate
-    primary: black
-    accent: teal
+    - scheme: slate
+      toggle:
+        name: Light Mode
+        icon: material/toggle-switch-off-outline
+      primary: black
+      accent: lime
+      media: "(prefers-color-scheme: dark)"
+    - scheme: default
+      toggle:
+        name: Dark Mode
+        icon: material/toggle-switch
+      primary: black
+      accent: teal
+      media: "(prefers-color-scheme: light)"
   favicon: assets/images/favicon.png
   logo: assets/images/logo.png
   features: