From 67e211c8837426652792794fd4ce99dc7f11f734 Mon Sep 17 00:00:00 2001
From: Iisakki Rotko <iisakki.rotko@gmail.com>
Date: Mon, 4 Mar 2024 16:43:22 +0100
Subject: [PATCH] add theme toggle button, change dark primary color

---
 solara/website/assets/custom.css    | 6 +++++-
 solara/website/assets/theme.js      | 2 +-
 solara/website/components/header.py | 3 +++
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/solara/website/assets/custom.css b/solara/website/assets/custom.css
index 8f9765446..66b06e8ef 100644
--- 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
index 03708fc8b..95596c5e0 100644
--- 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
index 4bd857a44..2fd8cfd30 100644
--- 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"])