docs/dc-brand.css

@@ -25,3 +25,21 @@
   --md-accent-bg-color: #fff;
   --md-accent-bg-color--light: #ffffffb3;
 }
+
+/*
+ * Dark scheme. Material derives its dark greys from a hue variable, so pointing
+ * that at the brand slate (206deg) gives the whole scheme the same cast as the
+ * header instead of Material's neutral default.
+ */
+[data-md-color-scheme='slate'] {
+  --md-hue: 206deg;
+}
+
+/*
+ * The brand slate is only readable on a light background, so the dark scheme
+ * uses a light tint of it for body links. Green stays the accent, which keeps
+ * link hover visible in both schemes.
+ */
+[data-md-color-scheme='slate'][data-md-color-primary='custom'] {
+  --md-typeset-a-color: #9fb5c6;
+}

mkdocs.yml

@@ -116,9 +116,18 @@ theme:
   name: material
   logo: 'img/dc-logo.svg'
   palette:
+    - scheme: slate
+      primary: custom
+      accent: custom
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to light mode
     - scheme: default
       primary: custom
       accent: custom
+      toggle:
+        icon: material/weather-night
+        name: Switch to dark mode
   font:
     text: 'Montserrat'
     code: 'Ubuntu Mono'