feat(docs): Add dark theme

ko-build · Oct 11, 2024 · 98339d3 · 98339d3
1 parent 7cb72e3
commit 98339d3
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 2 deletions.
diff --git a/docs/images/cncf-dark.svg b/docs/images/cncf-dark.svg
diff --git a/docs/images/cncf.svg → docs/images/cncf-light.svg b/docs/images/cncf.svg → docs/images/cncf-light.svg
diff --git a/docs/index.md b/docs/index.md
@@ -41,4 +41,7 @@ This can make it a good fit for lightweight CI/CD use cases.
 
 `ko` is a Cloud Native Computing Foundation Sandbox project.
 
-<a href="https://cncf.io"><img width=300 src="./images/cncf.svg" alt="CNCF logo" /></a>
+<a href="https://cncf.io">
+    <img width=300 src="./images/cncf-light.svg#only-light" alt="CNCF logo" />
+    <img width=300 src="./images/cncf-dark.svg#only-dark" alt="CNCF logo" />
+</a>
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -9,7 +9,26 @@ theme:
   favicon: images/favicon-96x96.png
   custom_dir: docs/custom/
   palette:
-    primary: light blue
+    # Palette toggle for automatic mode
+    - media: "(prefers-color-scheme)"
+      toggle:
+        icon: material/brightness-auto
+        name: Switch to light mode
+
+    # Palette toggle for light mode
+    - media: "(prefers-color-scheme: light)"
+      primary: light blue
+      toggle:
+        icon: material/brightness-7
+        name: Switch to dark mode
+
+    # Palette toggle for dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: light blue
+      toggle:
+        icon: material/brightness-4
+        name: Switch to system preference
 
 nav:
   - index.md