tweak docs style (#4745)

docs/favicon.svg

@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 150 70" shape-rendering="crispEdges">
+  <g id="logo">
+    <!-- t -->
+    <polygon points="10,40 10,20 0,20 0,10 10,10 10,0 20,0 20,10 30,10 30,20 20,20 20,30 30,30 30,40" />
+    <!-- i -->
+    <polygon points="40,40 40,20 50,20 50,40" />
+    <polygon points="40,10 40,0 50,0 50,10" />
+    <!-- n -->
+    <polygon points="60,40 60,10 80,10 80,40 90,40 90,20 70,20 70,40" />
+    <!-- y -->
+    <polygon points="100,50 100,40 130,40 130,10 120,10 120,20 110,20 110,10 100,10 100,30 120,30 120,50" />
+  </g>
+  <style>
+  @media (prefers-color-scheme: dark) {
+    #logo {
+      fill: #fff;
+    }
+  }
+  @media (prefers-color-scheme: light) {
+    #logo {
+      fill: #000;
+    }
+  }
+  </style>
+</svg>

mkdocs.yml

@@ -3,17 +3,18 @@ site_name: tinygrad docs
 site_url: https://docs.tinygrad.org/
 repo_url: https://github.com/tinygrad/tinygrad/
 nav:
-- Home: index.md
-- Quickstart: quickstart.md
-- MNIST Tutorial: mnist.md
-- API:
-  - Tensor: tensor.md
-  - Function: function.md
-  - dtypes: dtypes.md
-  - nn (Neural Networks): nn.md
-- Showcase: showcase.md
-- Developer: developer.md
-- Environment: env_vars.md
+- Home:
+  - index.md
+  - Quickstart: quickstart.md
+  - Showcase: showcase.md
+  - MNIST Tutorial: mnist.md
+  - API Reference:
+    - Tensor: tensor.md
+    - Function: function.md
+    - dtypes: dtypes.md
+    - nn (Neural Networks): nn.md
+    - Environment Variables: env_vars.md
+  - Developer: developer.md
 #- tinygrad: reference/
 
 #extra_css:
@@ -51,7 +52,7 @@ markdown_extensions:
 theme:
   name: material
   logo: logo_tiny_dark.svg
-  favicon: logo_tiny_dark.svg
+  favicon: favicon.svg
   features:
   - announce.dismiss
   - content.action.edit
@@ -62,16 +63,36 @@ theme:
   - navigation.footer
   - navigation.indexes
   - navigation.sections
-  - navigation.tabs
-  - navigation.tabs.sticky
   - navigation.top
   - search.highlight
   - search.suggest
   - toc.follow
+  - toc.integrate
   palette:
     scheme: slate
     primary: black
     accent: lime
+  palette:
+    - media: "(prefers-color-scheme)"
+      accent: lime
+      primary: black
+      toggle:
+        icon: material/brightness-auto
+        name: Switch to light mode
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      accent: lime
+      primary: black
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      accent: lime
+      primary: black
+      toggle:
+        icon: material/brightness-4
+        name: Switch to system preference
 plugins:
 - search
 - mkdocstrings: