docs: refine mkdocs theme styling

Add light/dark palette toggle and premium typography via custom CSS.

Author: mheidari988

docs/_assets/theme.css

@@ -0,0 +1,29 @@
+:root {
+  --md-text-font: "Outfit", sans-serif;
+  --md-code-font: "JetBrains Mono", monospace;
+}
+
+.md-typeset h1,
+.md-typeset h2,
+.md-typeset h3 {
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.md-typeset h1 {
+  font-size: 2.1rem;
+}
+
+.md-typeset h2 {
+  font-size: 1.6rem;
+}
+
+.md-typeset h3 {
+  font-size: 1.25rem;
+}
+
+.md-header__title,
+.md-nav__title {
+  font-weight: 600;
+  letter-spacing: 0.01em;
+}

mkdocs.yml

@@ -8,6 +8,22 @@ edit_uri: ""
 theme:
   name: material
   language: en
+  font:
+    text: Outfit
+    code: JetBrains Mono
+  palette:
+    - scheme: default
+      primary: indigo
+      accent: amber
+      toggle:
+        icon: material/weather-night
+        name: Switch to dark mode
+    - scheme: slate
+      primary: indigo
+      accent: amber
+      toggle:
+        icon: material/white-balance-sunny
+        name: Switch to light mode
   features:
     - navigation.tabs
     - navigation.sections
@@ -62,6 +78,9 @@ plugins:
   - git-revision-date-localized:
       fallback_to_build_date: true
 
+extra_css:
+  - _assets/theme.css
+
 markdown_extensions:
   - admonition
   - toc: