feat: Add dark mode in Gatsby site

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

site/src/css/authorpost.module.css

@@ -120,4 +120,4 @@ li {
     align-items: center;
     justify-content: center;
     height: 15rem;
-}
+}

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%);
+    }
+}