feat: Add dark mode in Gatsby site (#189)

* enhancement: Add dark mode in Gatsby site * lint * Update site/src/css/authorpost.module.css Co-authored-by: Kris Stern <[email protected]> * Update site/src/css/blogpost.module.css Co-authored-by: Kris Stern <[email protected]> --------- Co-authored-by: Kris Stern <[email protected]>
jenkins-infra · Dec 7, 2024 · fc0dff6 · fc0dff6
1 parent 6e74186
commit fc0dff6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/site/src/components/PageName.js b/site/src/components/PageName.js
@@ -8,7 +8,6 @@ const PageName = ({ title }) => (
     <Link style={{ textDecoration: `none` }} to="/">
         <h3
             style={{
-                color: `black`,
                 marginBottom: rhythm(1.5),
                 fontFamily: "Georgia,serif",
                 fontSize: "2rem",
@@ -17,6 +16,7 @@ const PageName = ({ title }) => (
                 flexWrap: "nowrap",
                 justifyContent: "center",
                 gap: "15px",
+                color: "hsl(240, 15%, 10%)"? "white" : "black",
             }}
         >
             <img

diff --git a/site/src/css/blogpost.module.css b/site/src/css/blogpost.module.css
@@ -1,5 +1,6 @@
 html {
     font-size: 16px;
+    color-scheme: light dark;
 }
 
 * {
@@ -106,7 +107,7 @@ li {
 
 .blogteaser {
     position: relative;
-    color: hsl(212, 30%, 40%);;
+    color: hsl(212, 30%, 40%);
     margin: 0;
     text-decoration: none !important;
     line-height: 1.66;
@@ -134,3 +135,22 @@ li {
     top: 0.3rem;
     margin-inline: 0.2rem;
 }
+
+@media screen and (prefers-color-scheme: dark) {
+    #contributor-grid * { 
+        color: hsl(240, 15%, 95%);
+    }
+
+    body {
+        background-color: hsl(240, 15%, 10%);
+        color: hsl(240, 15%, 95%);
+    }
+
+    .blogtitle {
+        color: hsl(240, 15%, 95%);
+    }
+
+    .blogteaser {
+        color: hsl(240, 15%, 95%);
+    }
+}