From 9b63b4ee64b176e2451b2b43d6b14d4ba1361c72 Mon Sep 17 00:00:00 2001
From: Koen Lageveen <koen.lageveen@me.com>
Date: Thu, 15 Oct 2020 20:45:24 +0200
Subject: [PATCH] =?UTF-8?q?dark=20mode=20=F0=9F=A6=87=20=F0=9F=A4=98?=
 =?UTF-8?q?=F0=9F=8F=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/index.css b/index.css
index 53aef11..856c119 100644
--- a/index.css
+++ b/index.css
@@ -52,6 +52,7 @@
 * {
     box-sizing: border-box;
 }
+
 html {
     --bright-white: #FFF;
     --paper-white: #F5F5F5;
@@ -70,6 +71,19 @@ html {
     line-height: 20px;
     background: var(--paper-white);
 }
+@media (prefers-color-scheme: dark) {
+    html {
+        --bright-white: #111;
+        --paper-white: #1F1F1F;
+
+        --ink-black: #ECECEC;
+        --dark-grey: #E0E0E0;
+        --medium-grey: #808080;
+        --light-grey: #4A4A4A;
+        --bright-grey: #2A2A2A;
+    }
+}
+
 body {
     height: 100%;
     min-height: 100%;
@@ -117,6 +131,11 @@ a:active {
     border-right: 1px solid var(--medium-grey);
     overflow: hidden;
 }
+@media (prefers-color-scheme: dark) {
+    .main-wrapper {
+        border-right-color: var(--paper-white);
+    }
+}
 main {
     display: flex;
     flex-direction: column;
@@ -305,6 +324,11 @@ button {
     color: var(--medium-grey);
     cursor: pointer;
 }
+@media (prefers-color-scheme: dark) {
+    button {
+        background: linear-gradient(var(--light-grey), var(--bright-white));
+    }
+}
 button:hover {
     color: var(--ink-black);
 }