From 98339d351896c4fec29c53d587b10760baa8e9ce Mon Sep 17 00:00:00 2001 From: Gabe Cook Date: Thu, 10 Oct 2024 21:49:47 -0500 Subject: [PATCH] feat(docs): Add dark theme --- docs/images/cncf-dark.svg | 1 + docs/images/{cncf.svg => cncf-light.svg} | 0 docs/index.md | 5 ++++- mkdocs.yml | 21 ++++++++++++++++++++- 4 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 docs/images/cncf-dark.svg rename docs/images/{cncf.svg => cncf-light.svg} (100%) diff --git a/docs/images/cncf-dark.svg b/docs/images/cncf-dark.svg new file mode 100644 index 0000000000..c8381a061a --- /dev/null +++ b/docs/images/cncf-dark.svg @@ -0,0 +1 @@ +cncf-color-bg.svg diff --git a/docs/images/cncf.svg b/docs/images/cncf-light.svg similarity index 100% rename from docs/images/cncf.svg rename to docs/images/cncf-light.svg diff --git a/docs/index.md b/docs/index.md index 7b9ad83130..49b9656695 100644 --- 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. -CNCF logo + + CNCF logo + CNCF logo + diff --git a/mkdocs.yml b/mkdocs.yml index 626da448fa..4bfb8b6dd1 100644 --- 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