docs: add dark mode (#1412)

containrrr · Oct 14, 2022 · a198875 · a198875
1 parent faa94c4
commit a198875
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/docs/stylesheets/theme.css b/docs/stylesheets/theme.css
@@ -6,11 +6,15 @@
     --md-accent-fg-color--transparent: #00334310;
 }
 
+[data-md-color-scheme="slate"] {
+    --md-typeset-a-color: #7f9ece;
+}
+
 .md-header-nav__button.md-logo {
     padding: 0;
 }
 
 .md-header-nav__button.md-logo img {
     width: 1.6rem;
     height: 1.6rem;
-}
+}
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -5,7 +5,16 @@ edit_uri: edit/main/docs/
 theme:
   name: 'material'
   palette:
-    scheme: containrrr
+    - media: "(prefers-color-scheme: light)"
+      scheme: containrrr
+      toggle:
+        icon: material/weather-night
+        name: Switch to dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to light mode
   logo: images/logo-450px.png
   favicon: images/favicon.ico
 extra_css:
@@ -24,7 +33,7 @@ markdown_extensions:
         repo: watchtower
     - pymdownx.saneheaders
     - pymdownx.tabbed:
-        alternate_style: true 
+        alternate_style: true
 nav:
    - 'Home': 'index.md'
    - 'Introduction': 'introduction.md'