Add dark mode to docs and a stroke to logo (#2894)

2026-01-10 08:08:16 -05:00 · 2021-07-27 16:40:48 +02:00
parent 6c2a1f0e16
commit 3a3ae0bd6b
14 changed files with 20 additions and 8 deletions
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-<p align="center"><a href="https://chainsafe.github.io/lodestar"><img width="400" title="Lodestar" src='assets/brand-assets/for-dark-backgrounds/full-mark.png' /></a></p>
+<p align="center"><a href="https://chainsafe.github.io/lodestar"><img width="500" title="Lodestar" src='assets/lodestar_icon_text_black_stroke.png' /></a></p>

 # Lodestar Monorepo

--- a/assets/brand-assets/for-dark-backgrounds/full-mark.png
+++ b/assets/brand-assets/for-dark-backgrounds/full-mark.png
--- a/assets/brand-assets/for-light-backgrounds/full-mark.png
+++ b/assets/brand-assets/for-light-backgrounds/full-mark.png
--- a/assets/brand-assets/icons/chainsafe_logo.png
+++ b/assets/brand-assets/icons/chainsafe_logo.png
--- a/assets/lodestar_icon_300.png
+++ b/assets/lodestar_icon_300.png
--- a/assets/lodestar_icon_950.png
+++ b/assets/lodestar_icon_950.png
--- a/assets/lodestar_icon_text_black.png
+++ b/assets/lodestar_icon_text_black.png
--- a/assets/lodestar_icon_text_black_stroke.png
+++ b/assets/lodestar_icon_text_black_stroke.png
--- a/assets/lodestar_icon_text_white.png
+++ b/assets/lodestar_icon_text_white.png
--- a/assets/brand-assets/icons/round-icon.ico
+++ b/assets/brand-assets/icons/round-icon.ico
--- a/docs/images/logo_icon_with_name_white.png
+++ b/docs/images/logo_icon_with_name_white.png
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,4 +1,4 @@
-![lodestar logo](assets/300ppi/FullMark-BLACK.png)
+![lodestar logo](assets/lodestar_icon_text_black_stroke.png)

 ## Welcome to the Lodestar documentation!

--- a/docs/requirements.txt
+++ b/docs/requirements.txt
@@ -1,5 +1,5 @@
-mkdocs>=1.1
-mkdocs-material>=5.0
+mkdocs>=1.2
+mkdocs-material>=7.0
 Pygments>=2.4
 markdown>=3.2
 pymdown-extensions>=7.0
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -8,11 +8,23 @@ repo_url: https://github.com/chainsafe/lodestar
 # Configuration
 theme:
  name: material
-  logo: assets/300ppi/short-LS-hookS-WHITE.png
-  favicon: images/favicon.ico
+  logo: assets/lodestar_icon_300.png
+  favicon: assets/round-icon.ico
  palette:
-    scheme: preference
-    accent: black
+    - scheme: preference
+      media: "(prefers-color-scheme: light)"
+      primary: black
+      accent: deep purple
+      toggle:
+        icon: material/weather-night
+        name: Switch to dark mode
+    - scheme: slate
+      media: "(prefers-color-scheme: dark)"
+      primary: black
+      accent: deep purple
+      toggle:
+        icon: material/weather-sunny
+        name: Switch to light mode
  nav_style: dark

 plugins: