feat: dark theme for the solara.dev website (#513)

Images and other resources still need to be updated
widgetti · Mar 11, 2024 · e743318 · e743318
1 parent c3003b8
commit e743318
Show file tree

Hide file tree

Showing 7 changed files with 194 additions and 22 deletions.
diff --git 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
@@ -19,6 +19,14 @@
     --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: #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;
 }
 
 html,
@@ -29,6 +37,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 +49,14 @@ a:link {
     color: var(--color-primary);
 }
 
+.theme--dark 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;
@@ -46,6 +65,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 +82,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 +106,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 +133,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 +158,26 @@ 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) !important;
+    color: var(--dark-color-grey-light);
+}
+
+.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 +196,25 @@ blockquote p:last-child {
     color: var(--color-primary-darker) !important;
 }
 
+.theme--dark.v-application .text--primary {
+    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);
@@ -139,6 +223,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 +238,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 +273,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 +316,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/images/logo_white.svg b/solara/website/assets/images/logo_white.svg
diff --git a/solara/website/assets/theme.js b/solara/website/assets/theme.js
@@ -1,5 +1,8 @@
 vuetifyThemes = {
     light: {
         primary: '#ff991f',
+    },
+    dark: {
+        primary: '#f77e14',
     }
 }
diff --git a/solara/website/components/header.py b/solara/website/components/header.py
@@ -1,9 +1,13 @@
 from typing import Callable
 
 import solara
+import solara.lab
 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):
@@ -21,20 +25,6 @@ def Header(
 
     # set states for menu
     with solara.Column(gap="0px"):
-        solara.Style(
-            """
-                    .news {
-                        background-color: #ff991f;
-                        padding: 10px;
-                        font-size: 20px;
-                        display: flex;
-                        justify-content: center;
-                    }
-                    .news a {
-                        color: white !important;
-                    }
-                     """
-        )
         with solara.Div(classes=["news"]):
             solara.HTML(
                 "div",
@@ -46,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:
@@ -68,5 +58,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"])
diff --git 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():

diff --git 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>