add proper dark mode with RB theme

redbrick · Mar 1, 2024 · 4f1e057 · 4f1e057
1 parent 37697a5
commit 4f1e057
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 11 deletions.
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -5,3 +5,7 @@
   --md-text-font: "Myriad Pro", sans-serif;
   --md-code-font: "Fira Code", monospace;
 }
+
+[data-md-color-scheme="slate"] * {
+  --md-typeset-a-color: #d62e2e;
+}
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -18,21 +18,24 @@ theme:
     - content.code.copy
     - content.code.annotate
   palette:
-    # Palette toggle for dark mode
-    - scheme: slate
+    - media: "(prefers-color-scheme)"
       toggle:
-        icon: material/brightness-4
+        icon: material/link
         name: Switch to light mode
-        primary: custom
-        accent: custom
-
-    # Palette toggle for light mode
-    - scheme: default
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      primary: indigo
+      accent: indigo
       toggle:
-        icon: material/brightness-7
+        icon: material/toggle-switch
         name: Switch to dark mode
-        primary: custom
-        accent: custom
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: black
+      accent: red
+      toggle:
+        icon: material/toggle-switch-off
+        name: Switch to system preference
 
 plugins:
   - awesome-pages