From 3e365167909d0cdd14dd0c25565b5993f7deac48 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] feat: dark theme for the solara.dev website

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

diff --git a/solara/tasks.py b/solara/tasks.py
index 87ca735e5..6a8c8616a 100644
--- a/solara/tasks.py
+++ b/solara/tasks.py
@@ -151,16 +151,20 @@ def exception(self) -> Optional[Exception]:
         return self._exception.value
 
     @abc.abstractmethod
-    def retry(self) -> None: ...
+    def retry(self) -> None:
+        ...
 
     @abc.abstractmethod
-    def cancel(self) -> None: ...
+    def cancel(self) -> None:
+        ...
 
     @abc.abstractmethod
-    def __call__(self, *args: P.args, **kwargs: P.kwargs) -> None: ...
+    def __call__(self, *args: P.args, **kwargs: P.kwargs) -> None:
+        ...
 
     @abc.abstractmethod
-    def is_current(self) -> bool: ...
+    def is_current(self) -> bool:
+        ...
 
     def _prestart(self):
         self._result.value = TaskResult[R](latest=self._last_value, _state=TaskState.STARTING)
@@ -438,7 +442,8 @@ def task(
     f: None = None,
     *,
     prefer_threaded: bool = ...,
-) -> Callable[[Callable[P, R]], Task[P, R]]: ...
+) -> Callable[[Callable[P, R]], Task[P, R]]:
+    ...
 
 
 @overload
@@ -446,7 +451,8 @@ def task(
     f: Callable[P, Union[Coroutine[Any, Any, R], R]],
     *,
     prefer_threaded: bool = ...,
-) -> Task[P, R]: ...
+) -> Task[P, R]:
+    ...
 
 
 def task(
@@ -693,7 +699,8 @@ def use_task(
     dependencies: None = ...,
     raise_error=...,
     prefer_threaded=...,
-) -> Callable[[Callable[P, R]], Task[P, R]]: ...
+) -> Callable[[Callable[P, R]], Task[P, R]]:
+    ...
 
 
 @overload
@@ -703,7 +710,8 @@ def use_task(
     dependencies: None = ...,
     raise_error=...,
     prefer_threaded=...,
-) -> Task[P, R]: ...
+) -> Task[P, R]:
+    ...
 
 
 @overload
@@ -713,7 +721,8 @@ def use_task(
     dependencies: List = ...,
     raise_error=...,
     prefer_threaded=...,
-) -> Callable[[Callable[[], R]], "Task[[], R]"]: ...
+) -> Callable[[Callable[[], R]], "Task[[], R]"]:
+    ...
 
 
 @overload
@@ -723,7 +732,8 @@ def use_task(
     dependencies: List = ...,
     raise_error=...,
     prefer_threaded=...,
-) -> "Task[[], R]": ...
+) -> "Task[[], R]":
+    ...
 
 
 def use_task(
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():