Add dark mode colors (#16)

diff --git a/src/components/albumCard.css b/src/components/albumCard.css
index 5f0086dc81080ab36655a826521160a5e5e9dfb4..188af12ddd81e4588b8e6bbb142d2df9fee2c7e4 100644 (file)
--- 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 4caab62782d3a37f3d9d423197175c7d0a2612d1..928a76730ca834d76813b17398b73e9c3838516f 100644 (file)
--- 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 5f8f6bd2f75fa0c1b09450e55cb13aa97534f983..b6b2503facd05821ce729039f3a83abb01b3d267 100644 (file)
--- 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 1ce2f384e1c26b1dfb21e83f4d38b16de8e400d7..60640caf6c803be4469b4af9df62d705b6524a8f 100644 (file)
--- 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 (file)
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 dfebe50e3030ac444f3112c54b455a02d3d689fd..c532e9a9eeb9884b9c9b90936f4719b1f4610f78 100644 (file)
--- 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) {