[docs] docs dark mode

docs/stylesheets/extra.css

@@ -11,3 +11,42 @@
 .md-typeset h3 code {
   word-break: break-word;
 }
+
+[data-md-color-scheme="slate"] {
+  --md-default-bg-color: #0f141c;
+  --md-default-fg-color: #e8eef7;
+  --md-default-fg-color--light: #b3bfd1;
+  --md-default-fg-color--lighter: #7f8ba0;
+  --md-default-fg-color--lightest: #5d6880;
+  --md-code-bg-color: #111923;
+  --md-code-fg-color: #e4edf8;
+  --md-accent-fg-color: #7dd3fc;
+}
+
+[data-md-color-scheme="slate"] .md-header,
+[data-md-color-scheme="slate"] .md-tabs {
+  background: linear-gradient(90deg, #111923 0%, #162235 100%);
+}
+
+[data-md-color-scheme="slate"] .md-typeset pre > code,
+[data-md-color-scheme="slate"] .md-typeset code {
+  border: 1px solid rgba(125, 211, 252, 0.14);
+}
+
+[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
+  background: rgba(255, 255, 255, 0.015);
+}
+
+[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
+  background: rgba(125, 211, 252, 0.08);
+}
+
+[data-md-color-scheme="slate"] .md-typeset .admonition,
+[data-md-color-scheme="slate"] .md-typeset details {
+  background: rgba(255, 255, 255, 0.02);
+  border-color: rgba(125, 211, 252, 0.2);
+}
+
+[data-md-color-scheme="slate"] .md-typeset .arithmatex {
+  padding: 0.1rem 0;
+}

mkdocs.yml

@@ -10,6 +10,19 @@ strict: false
 theme:
   name: material
   font: false
+  palette:
+    - scheme: slate
+      primary: blue grey
+      accent: cyan
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to light mode
+    - scheme: default
+      primary: teal
+      accent: indigo
+      toggle:
+        icon: material/weather-night
+        name: Switch to dark mode
   features:
     - navigation.indexes
     - navigation.sections