From 33de68f5a5ca29af621c3f38b656a8498d5f4832 Mon Sep 17 00:00:00 2001
From: Garrit Franke <garrit@slashdev.space>
Date: Mon, 12 Apr 2021 22:31:37 +0200
Subject: [PATCH] feat: dark mode!

---
 components/BlogList.js |  1 -
 components/Header.js   |  2 --
 components/Meta.js     | 23 +++++++++++++++++++++++
 pages/posts/[post].js  |  3 ---
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/BlogList.js b/components/BlogList.js
index 65e2167..75bf7af 100644
--- a/components/BlogList.js
+++ b/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,
diff --git a/components/Header.js b/components/Header.js
index eb31235..3939d23 100644
--- a/components/Header.js
+++ b/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;
diff --git a/components/Meta.js b/components/Meta.js
index 2aef2ee..55e9062 100644
--- a/components/Meta.js
+++ b/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>
     </>
diff --git a/pages/posts/[post].js b/pages/posts/[post].js
index 5be84ab..ee53204 100644
--- a/pages/posts/[post].js
+++ b/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;
           }