add theme toggle button, change dark primary color

widgetti · Mar 11, 2024 · d336c1c · d336c1c
1 parent 9503f9b
commit d336c1c
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/solara/website/assets/custom.css b/solara/website/assets/custom.css
@@ -21,7 +21,7 @@
     --jp-content-font-size5: 2.25rem;
 
     --dark-color-primary-lightest: #26273D;
-    --dark-color-primary: #ff991f;
+    --dark-color-primary: #7A8AFF;
     --dark-color-primary-darker: #262D69;
     --dark-color-text: hsla(0,0%,100%,.7);
     --dark-color-grey: #ababab;
@@ -52,6 +52,10 @@ a:link {
     color: var(--dark-color-primary);
 }
 
+.theme--dark .jp-RenderedHTMLCommon a:visited {
+    color: var(--dark-color-primary);
+}
+
 .jp-RenderedHTMLCommon pre {
     background-color: var(--color-grey-light);
     display: block;

diff --git a/solara/website/assets/theme.js b/solara/website/assets/theme.js
@@ -3,6 +3,6 @@ vuetifyThemes = {
         primary: '#ff991f',
     },
     dark: {
-        primary: '#ff991f',
+        primary: '#7A8AFF',
     }
 }
diff --git a/solara/website/components/header.py b/solara/website/components/header.py
@@ -1,6 +1,7 @@
 from typing import Callable
 
 import solara
+import solara.lab
 from solara.alias import rv
 from solara.server import settings
 
@@ -71,5 +72,7 @@ def Header(
             with rv.Btn(icon=True, tag="a", class_="d-none d-md-flex", attributes={"href": "https://discord.gg/dm4GKNDjXN", "target": "_blank"}):
                 rv.Icon(children=["mdi-discord"])
 
+            solara.lab.ThemeToggle()
+
             with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_right_menu and on_toggle_right_menu()):
                 rv.Icon(children=["mdi-menu"])