From 9503f9b280da7d08326470b451f736ecf8634990 Mon Sep 17 00:00:00 2001
From: Iisakki Rotko <iisakki.rotko@gmail.com>
Date: Wed, 21 Feb 2024 09:10:36 +0100
Subject: [PATCH 1/3] feat: dark theme for the solara.dev website

Images and other resources still need to be updated
---
 solara/website/assets/custom.css    | 92 ++++++++++++++++++++++++++++-
 solara/website/assets/theme.js      |  3 +
 solara/website/components/header.py |  5 +-
 solara/website/pages/__init__.py    |  7 +--
 4 files changed, 101 insertions(+), 6 deletions(-)

diff --git a/solara/website/assets/custom.css b/solara/website/assets/custom.css
index 61287ed92..8f9765446 100644
--- a/solara/website/assets/custom.css
+++ b/solara/website/assets/custom.css
@@ -19,6 +19,13 @@
     --jp-content-font-size3: 1.75rem;
     --jp-content-font-size4: 2rem;
     --jp-content-font-size5: 2.25rem;
+
+    --dark-color-primary-lightest: #26273D;
+    --dark-color-primary: #ff991f;
+    --dark-color-primary-darker: #262D69;
+    --dark-color-text: hsla(0,0%,100%,.7);
+    --dark-color-grey: #ababab;
+    --dark-color-grey-light: #202020;
 }
 
 html,
@@ -29,6 +36,9 @@ li {
     color: var(--color-text);
     font-size: var(--font-size);
 }
+.theme--dark p, .theme--dark ul, .theme--dark li {
+    color: var(--dark-color-text);
+}
 
 a {
     transition: color 0.3s ease;
@@ -38,6 +48,10 @@ a:link {
     color: var(--color-primary);
 }
 
+.theme--dark a:link {
+    color: var(--dark-color-primary);
+}
+
 .jp-RenderedHTMLCommon pre {
     background-color: var(--color-grey-light);
     display: block;
@@ -46,6 +60,10 @@ a:link {
     margin: 0.5rem 0;
 }
 
+.theme--dark .jp-RenderedHTMLCommon pre {
+    background-color: var(--dark-color-grey-light);
+}
+
 .code {
     padding: 0;
     margin: 0;
@@ -59,10 +77,18 @@ a:link {
     background-color: var(--color-primary);
 }
 
+.theme--dark .bg-primary {
+    background-color: var(--dark-color-primary);
+}
+
 .bg-primary-fade {
     background-color: var(--color-primary-lightest) !important;
 }
 
+.theme--dark .bg-primary-fade {
+    background-color: var(--dark-color-primary-lightest) !important;
+}
+
 .padding-40 {
     padding: 40px !important;
 }
@@ -75,12 +101,20 @@ h1 {
     background-color: var(--color-grey-light);
 }
 
+.theme--dark .bg-grey {
+    background-color: var(--dark-color-grey-light);
+}
+
 li::marker {
     color: var(--color-primary);
     font-size: 1.2em;
     font-weight: bold;
 }
 
+.theme--dark li::marker {
+    color: var(--dark-color-primary);
+}
+
 blockquote,
 .jp-RenderedHTMLCommon blockquote {
     font-family: "Courier New", Courier, monospace;
@@ -94,6 +128,12 @@ blockquote,
     background-position: 1.2rem center;
 }
 
+.theme--dark blockquote,
+.theme--dark .jp-RenderedHTMLCommon blockquote {
+    border-left: 8px solid var(--dark-color-primary);
+    background-color: var(--dark-color-grey-light);
+}
+
 blockquote p:last-child {
     margin-bottom: 0;
 }
@@ -113,6 +153,25 @@ blockquote p:last-child {
     max-width: 500px;
 }
 
+.v-btn.homepage-button {
+    background-color: var(--color-primary-darker) !important;
+}
+
+.theme--dark .v-btn.homepage-button {
+    background-color: var(--dark-color-primary-darker) !important;
+}
+
+.v-card.testimonial-card{
+    background-color: var(--color-primary-lightest);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.theme--dark .v-card.testimonial-card{
+    background-color: var(--dark-color-primary-lightest);
+}
+
 /* vuetify component overrides */
 
 .v-btn.solara-docs-button {
@@ -131,6 +190,10 @@ blockquote p:last-child {
     color: var(--color-primary-darker) !important;
 }
 
+.theme--dark.v-application .text--primary {
+    color: var(--dark-color-primary-darker) !important;
+}
+
 /* hero */
 .hero {
     background: var(--color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp);
@@ -139,6 +202,11 @@ blockquote p:last-child {
     padding: 7rem 0;
 }
 
+.theme--dark .hero {
+    background: var(--dark-color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp);
+    background-size: cover;
+}
+
 .hero h1 {
     font-size: 4.5rem;
 }
@@ -149,7 +217,11 @@ blockquote p:last-child {
 }
 
 .hero b {
-    color: #ff991f;
+    color: var(--color-primary);
+}
+
+.theme--dark .hero b {
+    color: var(--dark-color-primary);
 }
 
 @media screen and (max-width: 960px) {
@@ -180,10 +252,19 @@ blockquote p:last-child {
     color: var(--color-grey);
 }
 
+.theme--dark .menu li a:link,
+.theme--dark .menu li a:visited {
+    color: var(--dark-color-grey);
+}
+
 .menu li a:hover {
     color: var(--color-primary);
 }
 
+.theme--dark .menu li a:hover {
+    color: var(--dark-color-primary);
+}
+
 .menu li a:link {
     display: block;
     padding: 1rem 2rem;
@@ -214,11 +295,20 @@ blockquote p:last-child {
     color: var(--color-grey);
 }
 
+.theme--dark .sidebar a:link,
+.theme--dark .sidebar a:visited {
+    color: var(--dark-color-grey);
+}
+
 .sidebar a:hover {
     color: var(--color-primary);
     text-decoration: none;
 }
 
+.theme--dark .sidebar a:hover {
+    color: var(--dark-color-primary);
+}
+
 .sidebar ul li {
     font-weight: normal;
     margin: 0.8rem auto;
diff --git a/solara/website/assets/theme.js b/solara/website/assets/theme.js
index 091b96b69..03708fc8b 100644
--- a/solara/website/assets/theme.js
+++ b/solara/website/assets/theme.js
@@ -1,5 +1,8 @@
 vuetifyThemes = {
     light: {
         primary: '#ff991f',
+    },
+    dark: {
+        primary: '#ff991f',
     }
 }
diff --git a/solara/website/components/header.py b/solara/website/components/header.py
index 20dc1b4eb..4bd857a44 100644
--- a/solara/website/components/header.py
+++ b/solara/website/components/header.py
@@ -24,12 +24,15 @@ def Header(
         solara.Style(
             """
                     .news {
-                        background-color: #ff991f;
+                        background-color: var(--color-primary);
                         padding: 10px;
                         font-size: 20px;
                         display: flex;
                         justify-content: center;
                     }
+                    .theme--dark .news {
+                        background-color: var(--dark-color-primary-darker);
+                    }
                     .news a {
                         color: white !important;
                     }
diff --git a/solara/website/pages/__init__.py b/solara/website/pages/__init__.py
index a4f65f122..92ce76d2e 100644
--- a/solara/website/pages/__init__.py
+++ b/solara/website/pages/__init__.py
@@ -124,9 +124,9 @@ def Layout(children=[]):
                         )
                         with solara.HBox():
                             with solara.Link("/docs"):
-                                solara.Button(label="Read more", class_="ma-1", href="/docs", color="#f19f41", dark=True)
+                                solara.Button(label="Read more", class_="ma-1 homepage-button", href="/docs", color="primary", dark=True)
                             with solara.Link("/docs/quickstart"):
-                                solara.Button(label="Quickstart", class_="ma-1", color="#f19f41", dark=True)
+                                solara.Button(label="Quickstart", class_="ma-1 homepage-button", color="primary", dark=True)
                     # with rv.Col(md=4, sm=5):
                     #     rv.Img(src="https://dxhl76zpt6fap.cloudfront.net/public/landing/what.webp", style_="width:900px")
 
@@ -341,9 +341,8 @@ def Testimonial(text, name, position, img):
     with rv.Card(
         elevation=2,
         dark=False,
-        color="#ffeec5",
         max_width=max_width,
-        style_="display: flex; flex-direction: column; justify-content: space-between;",
+        class_="testimonial-card",
     ):
         # rv.CardTitle(children=["Former Plotly CEO"])
         with rv.CardActions():

From d336c1c3b645027649cb75dd766ae21d1b5932d4 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 2/3] 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"])

From a93b0fa7d66ba5b15303befcf403dbbdffea8325 Mon Sep 17 00:00:00 2001
From: Iisakki Rotko <iisakki.rotko@gmail.com>
Date: Tue, 5 Mar 2024 14:49:47 +0100
Subject: [PATCH 3/3] incorporate feedback from review

---
 solara/components/applayout.py              |  2 +-
 solara/website/assets/custom.css            | 23 ++++++++--
 solara/website/assets/images/logo_white.svg | 50 +++++++++++++++++++++
 solara/website/assets/theme.js              |  2 +-
 solara/website/components/header.py         | 22 ++-------
 solara/website/templates/index.html.j2      | 19 +++++++-
 6 files changed, 94 insertions(+), 24 deletions(-)
 create mode 100644 solara/website/assets/images/logo_white.svg

diff --git a/solara/components/applayout.py b/solara/components/applayout.py
index 1e6cb7dba..b83b096ac 100644
--- a/solara/components/applayout.py
+++ b/solara/components/applayout.py
@@ -306,7 +306,7 @@ def set_path(index):
                             close_on_content_click=False,
                         ):
                             pass
-                            v.Html(tag="div", children=children_sidebar, style_="background-color: white; padding: 12px; min-width: 400px")
+                            v.Sheet(children=children_sidebar, style_="padding: 12px; min-width: 400px")
                     if title or children_appbartitle:
                         v.ToolbarTitle(children=children_appbartitle or [title])
                     v.Spacer()
diff --git a/solara/website/assets/custom.css b/solara/website/assets/custom.css
index 66b06e8ef..3243dbafa 100644
--- a/solara/website/assets/custom.css
+++ b/solara/website/assets/custom.css
@@ -21,8 +21,9 @@
     --jp-content-font-size5: 2.25rem;
 
     --dark-color-primary-lightest: #26273D;
-    --dark-color-primary: #7A8AFF;
-    --dark-color-primary-darker: #262D69;
+    /* --dark-color-primary: #7A8AFF; */
+    --dark-color-primary: #f77e14;
+    --dark-color-primary-darker: #303886;
     --dark-color-text: hsla(0,0%,100%,.7);
     --dark-color-grey: #ababab;
     --dark-color-grey-light: #202020;
@@ -162,7 +163,8 @@ blockquote p:last-child {
 }
 
 .theme--dark .v-btn.homepage-button {
-    background-color: var(--dark-color-primary-darker) !important;
+    background-color: var(--dark-color-primary) !important;
+    color: var(--dark-color-grey-light);
 }
 
 .v-card.testimonial-card{
@@ -198,6 +200,21 @@ blockquote p:last-child {
     color: var(--dark-color-primary-darker) !important;
 }
 
+/* header */
+.news {
+    background-color: var(--color-primary);
+    padding: 10px;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+}
+.theme--dark .news {
+    background-color: var(--dark-color-primary);
+}
+.news a {
+    color: white !important;
+}
+
 /* hero */
 .hero {
     background: var(--color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp);
diff --git a/solara/website/assets/images/logo_white.svg b/solara/website/assets/images/logo_white.svg
new file mode 100644
index 000000000..dfcebc841
--- /dev/null
+++ b/solara/website/assets/images/logo_white.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="241" height="65"
+	 viewBox="0 0 241 65" style="enable-background:new 0 0 241 65;" xml:space="preserve">
+<style type="text/css">
+	.st0{clip-path:url(#SVGID_2_);}
+	.st1{fill:#FFCF64;}
+	.st2{fill:#FF8C3E;}
+	.st3{fill:#FFFFFF;}
+</style>
+<g>
+	<defs>
+		<rect id="SVGID_1_" y="0" width="240.7" height="64.5"/>
+	</defs>
+	<clipPath id="SVGID_2_">
+		<use xlink:href="#SVGID_1_"  style="overflow:visible;"/>
+	</clipPath>
+	<g class="st0">
+		<path class="st1" d="M57.1,30.6l4.4-12.8l-12.8-4.4L42.8,1.4L30.6,7.4L17.9,3l-4.4,12.8l-12.1,6l5.9,12.1L3,46.6l12.8,4.4
+			l5.9,12.1l12.1-6l12.8,4.4L51,48.7l12.1-6L57.1,30.6z M54.3,34.4L34.4,54.3c-1.2,1.2-3.1,1.2-4.3,0L10.2,34.4
+			c-1.2-1.2-1.2-3.1,0-4.3l19.9-19.9c1.2-1.2,3.1-1.2,4.3,0l19.9,19.9C55.5,31.3,55.5,33.2,54.3,34.4L54.3,34.4z"/>
+		<path class="st2" d="M53.6,19.4l-2-13.4L38.3,8L27.5,0l-8,10.8l-13.4,2l2,13.4L0,37l10.8,8l2,13.3l13.3-2l10.8,8l8-10.8l13.3-2
+			l-2-13.3l8-10.8L53.6,19.4L53.6,19.4z M52.8,24.1l-8.6,26.8c-0.5,1.6-2.2,2.5-3.9,2l-26.8-8.6c-1.6-0.5-2.5-2.2-2-3.8l8.6-26.8
+			c0.5-1.6,2.2-2.5,3.9-2l26.8,8.6C52.4,20.7,53.3,22.5,52.8,24.1L52.8,24.1z"/>
+		<path class="st3" d="M93.3,24.8c-0.4-0.6-1.1-1-1.8-1.3c-0.8-0.3-1.5-0.4-2.2-0.4c-0.4,0-0.8,0-1.2,0.1c-0.4,0.1-0.8,0.2-1.2,0.4
+			c-0.4,0.2-0.7,0.5-0.9,0.8c-0.2,0.3-0.3,0.7-0.3,1.2c0,0.8,0.3,1.3,0.8,1.7c0.6,0.4,1.3,0.8,2.2,1c0.9,0.3,1.8,0.6,2.8,0.9
+			c1,0.3,1.9,0.7,2.8,1.2c0.9,0.5,1.6,1.2,2.1,2.1c0.6,0.9,0.9,2,0.9,3.5c0,1.5-0.3,2.6-0.8,3.7c-0.5,1-1.2,1.9-2.1,2.6
+			c-0.9,0.7-1.9,1.2-3.1,1.5c-1.2,0.3-2.4,0.5-3.7,0.5c-1.6,0-3.2-0.3-4.5-0.8c-1.4-0.5-2.7-1.3-3.9-2.4l3.9-4.3
+			c0.6,0.8,1.3,1.3,2.2,1.8c0.9,0.4,1.8,0.6,2.7,0.6c0.4,0,0.9,0,1.4-0.2s0.9-0.3,1.2-0.5c0.4-0.2,0.7-0.5,0.9-0.8
+			c0.2-0.3,0.3-0.7,0.3-1.2c0-0.8-0.3-1.3-0.9-1.8c-0.6-0.4-1.3-0.8-2.2-1.1c-0.9-0.3-1.8-0.6-2.8-0.9c-1-0.3-2-0.7-2.8-1.2
+			c-0.9-0.5-1.6-1.2-2.2-2.1s-0.9-2-0.9-3.4c0-1.4,0.3-2.5,0.8-3.6c0.5-1,1.2-1.9,2.1-2.6s1.9-1.2,3.1-1.5c1.2-0.3,2.4-0.5,3.6-0.5
+			c1.4,0,2.8,0.2,4.1,0.6c1.3,0.4,2.5,1.1,3.6,2L93.3,24.8L93.3,24.8z"/>
+		<path class="st3" d="M103.4,31.2c0-2,0.3-3.8,1-5.5c0.7-1.6,1.6-3,2.8-4.2c1.2-1.1,2.6-2,4.3-2.6c1.7-0.6,3.5-0.9,5.4-0.9
+			c2,0,3.8,0.3,5.4,0.9c1.7,0.6,3.1,1.5,4.3,2.6s2.2,2.5,2.8,4.2s1,3.5,1,5.5s-0.3,3.8-1,5.5c-0.7,1.6-1.6,3-2.8,4.2
+			c-1.2,1.1-2.6,2-4.3,2.6c-1.7,0.6-3.5,0.9-5.4,0.9c-2,0-3.8-0.3-5.4-0.9c-1.7-0.6-3.1-1.5-4.3-2.6c-1.2-1.2-2.2-2.5-2.8-4.2
+			C103.8,35.1,103.4,33.2,103.4,31.2z M109.2,31.2c0,1.2,0.2,2.3,0.6,3.3c0.4,1,0.9,1.8,1.6,2.6c0.7,0.7,1.5,1.3,2.5,1.7
+			c1,0.4,2,0.6,3.2,0.6s2.3-0.2,3.2-0.6c1-0.4,1.8-1,2.5-1.7c0.7-0.7,1.2-1.6,1.6-2.6c0.4-1,0.6-2.1,0.6-3.3c0-1.2-0.2-2.2-0.6-3.2
+			c-0.4-1-0.9-1.9-1.6-2.6c-0.7-0.7-1.5-1.3-2.5-1.7c-1-0.4-2-0.6-3.2-0.6s-2.3,0.2-3.2,0.6c-1,0.4-1.8,1-2.5,1.7
+			c-0.7,0.7-1.2,1.6-1.6,2.6C109.3,29,109.2,30.1,109.2,31.2z"/>
+		<path class="st3" d="M138.1,18.7h5.5v20h10.3v5.1h-15.8V18.7z"/>
+		<path class="st3" d="M168.8,18.7h4.6l10.9,25.1H178l-2.2-5.3h-9.8l-2.1,5.3h-6.1L168.8,18.7z M170.9,26l-3.1,7.8h6.1L170.9,26z"/>
+		<path class="st3" d="M190.4,18.7h9.7c1.3,0,2.5,0.1,3.6,0.4s2.1,0.7,3,1.2c0.9,0.6,1.5,1.4,2.1,2.3c0.5,1,0.8,2.2,0.8,3.7
+			c0,1.8-0.5,3.3-1.4,4.5c-0.9,1.2-2.3,2-4,2.4l6.4,10.6h-6.6l-5.3-10h-2.7v10h-5.5L190.4,18.7L190.4,18.7z M195.9,29.1h3.3
+			c0.5,0,1,0,1.6,0c0.6,0,1.1-0.1,1.5-0.3s0.8-0.5,1.1-0.8c0.3-0.4,0.4-0.9,0.4-1.6c0-0.6-0.1-1.1-0.4-1.5c-0.3-0.4-0.6-0.7-1-0.9
+			c-0.4-0.2-0.9-0.3-1.4-0.4c-0.5-0.1-1-0.1-1.5-0.1h-3.6L195.9,29.1L195.9,29.1z"/>
+		<path class="st3" d="M225.2,18.7h4.6l10.9,25.1h-6.3l-2.2-5.3h-9.8l-2.1,5.3h-6.1L225.2,18.7L225.2,18.7z M227.3,26l-3.1,7.8h6.1
+			L227.3,26z"/>
+	</g>
+</g>
+</svg>
diff --git a/solara/website/assets/theme.js b/solara/website/assets/theme.js
index 95596c5e0..38dc82996 100644
--- a/solara/website/assets/theme.js
+++ b/solara/website/assets/theme.js
@@ -3,6 +3,6 @@ vuetifyThemes = {
         primary: '#ff991f',
     },
     dark: {
-        primary: '#7A8AFF',
+        primary: '#f77e14',
     }
 }
diff --git a/solara/website/components/header.py b/solara/website/components/header.py
index 2fd8cfd30..3af55c979 100644
--- a/solara/website/components/header.py
+++ b/solara/website/components/header.py
@@ -5,6 +5,9 @@
 from solara.alias import rv
 from solara.server import settings
 
+# TODO: remove import once function is included in solara
+from solara.website.pages.apps.scatter import use_dark_effective
+
 
 @solara._component_vue("algolia.vue")
 def Algolia(app_id: str, index_name: str, api_key: str, debug=False):
@@ -22,23 +25,6 @@ def Header(
 
     # set states for menu
     with solara.Column(gap="0px"):
-        solara.Style(
-            """
-                    .news {
-                        background-color: var(--color-primary);
-                        padding: 10px;
-                        font-size: 20px;
-                        display: flex;
-                        justify-content: center;
-                    }
-                    .theme--dark .news {
-                        background-color: var(--dark-color-primary-darker);
-                    }
-                    .news a {
-                        color: white !important;
-                    }
-                     """
-        )
         with solara.Div(classes=["news"]):
             solara.HTML(
                 "div",
@@ -50,7 +36,7 @@ def Header(
                     with solara.Button(icon=True, class_="hidden-md-and-up", on_click=lambda: on_toggle_left_menu and on_toggle_left_menu()):
                         rv.Icon(children=["mdi-menu"])
                 with solara.Link(path_or_route="/"):
-                    solara.Image(router.root_path + "/static/assets/images/logo.svg")
+                    solara.Image(router.root_path + f"/static/assets/images/logo{'_white' if use_dark_effective() else ''}.svg")
             rv.Spacer()
 
             if settings.search.enabled:
diff --git a/solara/website/templates/index.html.j2 b/solara/website/templates/index.html.j2
index 84c158ef9..7f0d0744e 100644
--- a/solara/website/templates/index.html.j2
+++ b/solara/website/templates/index.html.j2
@@ -38,8 +38,25 @@
         color: #182026;
     }
 
+    .theme--dark .DocSearch-Button {
+        background-color: #26273D;
+        color: hsla(0,0%,100%,.7);
+    }
+
     .DocSearch-Button:hover {
-        background-color: rgb(255, 247, 227);
+        background-color: rgba(150,150,200,0.15);
+    }
+
+    .theme--dark .DocSearch-Button:hover {
+        background-color: rgba(255, 255, 255, 0.15);
+    }
+
+    .DocSearch-Button .DocSearch-Search-Icon {
+        color: #26273D;
+    }
+
+    .theme--dark .DocSearch-Button .DocSearch-Search-Icon {
+        color: #ff991f;
     }
     </style>