Add dark mode switch

Signed-off-by: DL6ER <dl6er@dl6er.de>

docs/extra.css

@@ -1,8 +1,3 @@
-body,
-input {
-    color: #000;
-}
-
 .md-nav {
     font-size: 14px;
     line-height: 1.4;
@@ -16,9 +11,17 @@ input {
 .md-typeset code,
 .md-typeset pre {
     white-space: pre-wrap;
-    color: #532ba8;
+    color: var(--code-color);
 }
 
 .text-center {
     text-align: center !important;
 }
+
+[data-md-color-scheme="default"] {
+    --code-color: #532ba8;
+}
+
+[data-md-color-scheme="slate"] {
+    --code-color: #a47df8;
+}

mkdocs.yml

@@ -2,7 +2,7 @@ site_name: 'Pi-hole documentation'
 site_url: 'https://docs.pi-hole.net/'
 repo_url: 'https://github.com/pi-hole/pi-hole'
 edit_uri: '../docs/blob/master/docs/'
-copyright: 'Copyright © 2020 Pi-hole LLC'
+copyright: 'Copyright © 2021 Pi-hole LLC'
 remote_branch: gh-pages
 theme:
   name: 'material'
@@ -17,6 +17,25 @@ theme:
     code: 'Roboto Mono'
   features:
     - navigation.top
+  palette:
+
+    # Light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      primary: indigo
+      accent: indigo
+      toggle:
+        icon: material/lightbulb-outline
+        name: Switch to dark mode
+
+    # Dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: indigo
+      accent: indigo
+      toggle:
+        icon: material/lightbulb
+        name: Switch to light mode
 
 markdown_extensions:
   # Code highlighting in ``` ``` blocks