feat(doc): add light/dark mode to documentation

KarelZe · Jan 13, 2024 · 9556c6c · 9556c6c
1 parent c4392ba
commit 9556c6c
Showing 1 changed file with 38 additions and 2 deletions.
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -7,9 +7,45 @@ theme:
   logo: img/logo.png
   favicon: img/favicon.ico
   name: material
+  darkMode: true
   palette:
-    primary: black
-    accent: indigo
+    # Palette toggle for automatic mode
+    - media: "(prefers-color-scheme)"
+      toggle:
+        icon: material/brightness-auto
+        name: Switch to light mode
+      primary: black
+      accent: indigo
+    # Palette toggle for light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
+      primary: black
+      accent: indigo
+    # Palette toggle for dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      toggle:
+        icon: material/brightness-4
+        name: Switch to system preference
+      primary: black
+      accent: indigo
+    # - media: "(prefers-color-scheme: light)"
+    #   scheme: default
+    #   primary: black
+    #   accent: indigo
+    #   toggle:
+    #     icon: material/toggle-switch-off-outline
+    #     name: Switch to dark mode
+    # - media: "(prefers-color-scheme: dark)"
+    #   scheme: slate
+    #   primary: black
+    #   accent: indigo
+    #   toggle:
+    #     icon: material/toggle-switch
+    #     name: Switch to light mode
   icon:
     repo: fontawesome/brands/github
     edit: material/pencil