feat: dark mode!

components/BlogList.js

@@ -82,7 +82,6 @@ const BlogList = ({ posts }) => {
             padding: 1.5rem 1.25rem;
             transform: translateX(0px);
             transition: transform 0.3s ease-in;
-            border-bottom: 1px solid #ebebeb;
           }
           .blog__info h2,
           .blog__info h3,

components/Header.js

@@ -38,7 +38,6 @@ export default function Header(props) {
           }
           nav {
             padding: 1.5rem 1.25rem;
-            border-bottom: 1px solid #ebebeb;
             display: flex;
             justify-content: space-between;
             flex-direction: row;
@@ -55,7 +54,6 @@ export default function Header(props) {
               padding: 2rem;
               width: 30vw;
               height: 100%;
-              border-right: 1px solid #ebebeb;
               border-bottom: none;
               flex-direction: column;
               align-items: flex-start;

components/Meta.js

@@ -236,6 +236,29 @@ export default function Meta(props) {
           .blog__footer a {
             text-decoration: underline;
           }
+
+          @media (prefers-color-scheme: dark) {
+            :root {
+                background-color: #161618;
+                color: #dbd7db;
+            }
+
+            html {
+                scrollbar-color: #dbd7db #161618 !important;
+            }
+
+            h1, h2, h3, h4, p, pre, a, ul, li, blog__body > * {
+              color: #dbd7db;
+            }
+        
+            .button__link {
+                background-color: #67676c;
+            }
+        
+            a {
+               color: #dbd7db;
+            }
+          }
         `}
       </style>
     </>

pages/posts/[post].js

@@ -92,9 +92,6 @@ export default function BlogTemplate(props) {
           .blog__body h1 h2 h3 h4 h5 h6 p {
             font-weight: normal;
           }
-          .blog__body p {
-            color: inherit;
-          }
           .blog__body ul {
             list-style: initial;
           }