From 0173d87cfd50d7b748dbb9ea93f3ab9d9f4fac76 Mon Sep 17 00:00:00 2001
From: Ben Larson <blarson11@icloud.com>
Date: Tue, 22 Sep 2020 21:05:50 -0500
Subject: [PATCH] Add dark mode colors (#16)

---
 src/components/albumCard.css |  2 +-
 src/components/interest.css  |  4 ++--
 src/components/menu.css      |  8 ++++----
 src/index.html               |  2 +-
 src/styles/colors.css        | 23 +++++++++++++++++++++++
 src/{ => styles}/main.css    | 17 +++++++----------
 6 files changed, 38 insertions(+), 18 deletions(-)
 create mode 100644 src/styles/colors.css
 rename src/{ => styles}/main.css (54%)

diff --git a/src/components/albumCard.css b/src/components/albumCard.css
index 5f0086d..188af12 100644
--- a/src/components/albumCard.css
+++ b/src/components/albumCard.css
@@ -1,7 +1,7 @@
 .AlbumCard {
   display: block;
   color: inherit;
-  background-color: #eee;
+  background-color: var(--foreground-color-primary);
   box-shadow: 0 0.1em 1em rgba(0, 0, 0, 0.2);
   border-radius: 0.5em;
   width: 15em;
diff --git a/src/components/interest.css b/src/components/interest.css
index 4caab62..928a767 100644
--- a/src/components/interest.css
+++ b/src/components/interest.css
@@ -1,10 +1,10 @@
 @import url('./horizontalScroller.css');
 
 .Interest {
-  background: #ddd;
+  background: var(--background-color-primary);
   padding: 4em 0;
   text-align: center;
-  color: rgba(0, 0, 0, 0.6);
+  color: var(--text-color-primary);
 }
 
 .Interest h2 {
diff --git a/src/components/menu.css b/src/components/menu.css
index 5f8f6bd..b6b2503 100644
--- a/src/components/menu.css
+++ b/src/components/menu.css
@@ -1,6 +1,6 @@
 .Menu {
   box-sizing: border-box;
-  color: #333;
+  color: var(--text-color-secondary);
   padding: 1em;
   width: 22em;
   max-width: 100%;
@@ -50,7 +50,7 @@
 
 .isNavOpen .Menu-Button {
   color: inherit;
-  box-shadow: 0 0 0 1em #ccc inset;
+  box-shadow: 0 0 0 1em var(--foreground-color-secondary) inset;
 }
 
 .Menu-Body {
@@ -59,7 +59,7 @@
   box-sizing: border-box;
   border-radius: 1em;
   padding: 2em 2em 1em 2em;
-  background-color: #fff;
+  background-color: var(--background-color-secondary);
   box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
   transition: box-shadow 0.2s;
 }
@@ -90,7 +90,7 @@
 .Menu-ExternalLinks {
   display: flex;
   margin-top: 2em;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid var(--foreground-color-secondary);
 }
 
 .Menu-ExternalLinks li {
diff --git a/src/index.html b/src/index.html
index 1ce2f38..60640ca 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,7 @@
     />
     <title>Ben Larson</title>
     <style>
-      @import url('./main.css');
+      @import url('./styles/main.css');
     </style>
     <link
       rel="stylesheet"
diff --git a/src/styles/colors.css b/src/styles/colors.css
new file mode 100644
index 0000000..33c6728
--- /dev/null
+++ b/src/styles/colors.css
@@ -0,0 +1,23 @@
+:root {
+  --background-color-primary: #ddd;
+  --background-color-secondary: #fff;
+  --foreground-color-primary: #eee;
+  --foreground-color-secondary: #ccc;
+
+  --text-color-primary: #555;
+  --text-color-secondary: #333;
+  --text-color-links: #46f;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color-primary: #111;
+    --background-color-secondary: #333;
+    --foreground-color-primary: #333;
+    --foreground-color-secondary: #555;
+
+    --text-color-primary: #aaa;
+    --text-color-secondary: #ccc;
+    --text-color-links: #49f;
+  }
+}
diff --git a/src/main.css b/src/styles/main.css
similarity index 54%
rename from src/main.css
rename to src/styles/main.css
index dfebe50..c532e9a 100644
--- a/src/main.css
+++ b/src/styles/main.css
@@ -1,8 +1,9 @@
 @import url('https://fonts.larson.zone/inter/index.css');
-@import url('./components/hero.css');
-@import url('./components/menu.css');
-@import url('./components/interest.css');
-@import url('./components/albumCard.css');
+@import url('../components/hero.css');
+@import url('../components/menu.css');
+@import url('../components/interest.css');
+@import url('../components/albumCard.css');
+@import url('./colors.css');
 
 * {
   font-family: inherit;
@@ -14,16 +15,12 @@ body {
   font-family: inter, -apple-system, Roboto, 'Helvetica Neue', sans-serif;
   font-weight: bold;
   font-size: 1.5em;
+  background-color: var(--background-color-primary);
 }
 
 a {
   text-decoration: none;
-  color: #46f;
-}
-
-hr {
-  border: 0;
-  border-top: 1px solid #ccc;
+  color: var(--text-color-links);
 }
 
 @media (max-width: 45em) {
-- 
2.45.2