WIP: Dark mode theming

This does not yet include a UI element for the user to override the theme, but this does respect the user's light/dark preference as configured in the browser or OS.
scientific-python · Jun 8, 2023 · b5cf42a · b5cf42a
1 parent a3c11d5
commit b5cf42a
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 24 deletions.
diff --git a/assets/theme-css/content.css b/assets/theme-css/content.css
@@ -24,7 +24,7 @@
 .content-container .divider {
   height: 3px;
   border-radius: 50px;
-  background: var(--colorPrimaryDark);
+  background: var(--colorTextAlt);
   width: 60px;
   &.is-centered {
     margin: 0 auto;
@@ -80,7 +80,17 @@ h6 {
   margin-top: 21px;
 }
 
+.content-container .name.title {
+  /* Override bulma's .title selector. */
+  color: var(--colorHeading);
+}
+
 /* Override bulma .label font-weight, which otherwise impacts on g.label used by mermaid */
 g.label {
   font-weight: normal;
 }
+
+strong {
+  /* Override bulma's STRONG selector. */
+  color: var(--colorText);
+}
diff --git a/assets/theme-css/fresh/partials/_navbar.scss b/assets/theme-css/fresh/partials/_navbar.scss
@@ -99,7 +99,6 @@ Navbar
     top: 0;
     left: 0;
     width: 100%;
-    background: $white;
     transform: translateY(-100%);
     z-index: 100;
     box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);

diff --git a/assets/theme-css/keyfeatures.css b/assets/theme-css/keyfeatures.css
@@ -46,18 +46,13 @@
   right: 0;
   width: 70%;
   height: 1.2em;
-  background: linear-gradient(
-    to right,
-    rgba(255, 255, 255, 0),
-    rgba(255, 255, 255, 1) 50%
-  );
 }
 
-.keyfeatures-box-content:hover > .keyfeatures-box-text,
-.keyfeatures-box-content:focus > .keyfeatures-box-text,
-.keyfeatures-box-content:active > .keyfeatures-box-text {
-  color: var(--colorSecondaryDark);
-}
+/* .keyfeatures-box-content:hover > .keyfeatures-box-text, */
+/* .keyfeatures-box-content:focus > .keyfeatures-box-text, */
+/* .keyfeatures-box-content:active > .keyfeatures-box-text { */
+/*   color: var(--colorPrimaryLight); */
+/* } */
 
 @media only screen and (max-width: 1280px) {
   .keyfeatures .container {

diff --git a/assets/theme-css/news.css b/assets/theme-css/news.css
@@ -4,17 +4,17 @@
   align-items: center;
   width: 100vw;
   min-height: 45px;
-  background-color: var(--colorPrimaryDark);
-  color: var(--colorSecondaryLight);
+  background-color: var(--colorBackgroundAlt);
+  color: var(--colorText);
   white-space: nowrap;
 }
 
 .news-container a {
-  color: var(--colorSecondaryLight);
+  color: var(--colorTextAlt);
 }
 
 .news-container a:hover {
-  color: var(--colorSecondaryLight);
+  color: var(--colorHover);
 }
 
 .news-title {

diff --git a/assets/theme-css/styles.css b/assets/theme-css/styles.css
@@ -1,4 +1,5 @@
 body {
+  color: var(--colorText);
   font-family: var(--fontFamily), sans-serif;
 }
 
@@ -53,7 +54,7 @@ em {
   font-family: var(--fontFamily), sans-serif;
   font-weight: 900;
   font-size: 6em;
-  color: var(--colorPrimaryDark);
+  color: var(--colorText);
   padding: 0 0.5em 0.5em;
 }
 
@@ -63,6 +64,7 @@ em {
 }
 
 .hero-subtitle {
+  color: var(--colorText);
   font-size: 1em;
   max-width: 550px;
 }
@@ -86,8 +88,7 @@ em {
   border: none;
   border-radius: 25px;
   outline: none;
-  /* Black, with 10% opacity */
-  box-shadow: 0px 8px 15px var(--colorShadow);
+  box-shadow: 0px 0px 15px var(--colorShadow);
   cursor: pointer;
 }
 
@@ -336,6 +337,24 @@ svg.icon {
   padding: 10px;
 }
 
+nav,
+.navbar {
+  background: var(--colorBackgroundAlt);
+  color: var(--colorTextAlt);
+}
+.navbar-burger {
+  color: var(--colorTextAlt);
+}
+.navbar-burger:hover {
+  color: var(--colorPrimaryLight);
+}
+.navbar-item {
+  color: var(--colorTextAlt);
+}
+.navbar-menu.is-active {
+  background: var(--colorBackgroundAlt2);
+}
+
 /* Local Variables: */
 /* css-indent-offset: 2 */
 /* End: */
diff --git a/assets/theme-css/vars.css b/assets/theme-css/vars.css
@@ -2,6 +2,7 @@
 :root {
   --fontFamily: {{ .Site.Params.font.name }};
 
+  /* First we name the colors of our theme's palette. */
   --colorPrimaryDark: rgb(1, 50, 67);
   --colorPrimary: rgb(77, 119, 207);
   --colorPrimaryLight: rgb(77, 171, 207);
@@ -10,13 +11,25 @@
   --colorSecondary: rgb(238, 238, 238);
   --colorSecondaryLight: rgb(255, 255, 255);
 
-  --colorHeading: rgb(54, 54, 54);
-  --colorHighlight: rgb(255, 197, 83);
-  --colorShadow: rgba(0, 0, 0, 0.1);
-  --colorContentLink: rgb(30, 135, 240);
+  --colorBrightBlue: rgb(30, 135, 240);
+  --colorYellow: rgb(255, 197, 83);
 
-  --colorIcon: rgb(30, 135, 240);
+  /* Now we assign those named colors to various purposes. */
+  --colorBackground: var(--colorSecondaryLight);
+  --colorBackgroundAlt: var(--colorPrimaryDark);
+  --colorBackgroundAlt2: var(--colorSecondaryDark);
 
+  --colorText: var(--colorPrimaryDark);
+  --colorTextAlt: var(--colorSecondaryLight);
+
+  --colorContentLink: var(--colorBrightBlue);
+  --colorHeading: var(--colorPrimaryDark);
+  --colorHighlight: var(--colorYellow);
+  --colorHover: var(--colorPrimaryLight);
+  --colorIcon: var(--colorBrightBlue);
+  --colorShadow: var(--colorPrimaryDark);
+
+    /* FIXME: These colors should probably use named colors. */
   --colorNoteHeading: #6ab0de;
   --colorNoteContent: #e7f2fa;
 
@@ -29,3 +42,24 @@
   --colorTipHeading: rgba(92, 184, 92, 0.8);
   --colorTipContent: #e6f9e6;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Basically, we reassign the colors named in the non-dark theme. The
+       exception is the background: it seems to look better as #111
+       than as --colorPrimaryDark. */
+    --colorBackground: #111;
+    --colorBackgroundAlt: var(--colorPrimaryDark);
+    --colorBackgroundAlt2: var(--colorSecondaryDark);
+
+    --colorText: var(--colorSecondaryLight);
+    --colorTextAlt: var(--colorSecondaryLight);
+
+    --colorShadow: var(--colorSecondary);
+    --colorHeading: var(--colorSecondary);
+  }
+  html {
+    background: var(--colorBackground);
+    color: var(--colorText);
+  }
+}