Feature: dark mode docs (#4914)

doc/fmt.css

@@ -1,4 +1,4 @@
-:root {
+:root > * {
   --md-primary-fg-color: #0050D0;
 }
 
@@ -60,3 +60,58 @@ code.decl > div {
       white-space: normal; /* Allow text wrapping on smaller screens */
   }
 }
+
+/* HLJS Overrides for Material Theme */
+
+.hljs {
+  color: var(--md-code-fg-color);
+  background: var(--md-code-bg-color);
+}
+.hljs-comment,
+.hljs-quote {
+  color: var(--md-code-hl-comment-color);
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: var(--md-code-hl-keyword-color);
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta-string {
+  color: var(--md-code-hl-string-color);
+}
+.hljs-number,
+.hljs-literal {
+  color: var(--md-code-hl-number-color);
+}
+.hljs-built_in,
+.hljs-class .hljs-title,
+.hljs-code {
+  color: var(--md-code-hl-function-color);
+}
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title,
+.hljs-section {
+  color: var(--md-code-hl-special-color);
+}
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-template-tag,
+.hljs-deletion {
+  color: var(--md-code-hl-constant-color);
+}
+.hljs-subst {
+  color: var(--md-code-fg-color);
+}

support/mkdocs.yml

@@ -10,6 +10,17 @@ theme:
     - navigation.tabs
     - navigation.top
     - toc.integrate
+  palette:
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      toggle:
+        icon: material/brightness-4
+        name: Switch to light mode
 
 extra_javascript:
   - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js