diff --git a/doc/fmt.css b/doc/fmt.css
index 75463865582e..ef260889ce64 100644
--- a/doc/fmt.css
+++ b/doc/fmt.css
@@ -1,4 +1,4 @@
-:root {
+:root > * {
   --md-primary-fg-color: #0050D0;
 }
 
@@ -60,3 +60,51 @@ 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 {
+  color: var(--md-code-hl-function-color);
+}
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  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 {
+  color: var(--md-code-hl-constant-color);
+}
diff --git a/support/mkdocs.yml b/support/mkdocs.yml
index 17034cd1ffce..063aec2c9a5b 100644
--- a/support/mkdocs.yml
+++ b/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
@@ -18,6 +29,8 @@ extra_javascript:
 extra_css:
   - https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css
   - fmt.css
+  - dark.css
+
 
 markdown_extensions:
   - pymdownx.highlight: