add dark mode theme

spaceninja · Aug 11, 2023 · 07141ae · 07141ae
1 parent aa7df89
commit 07141ae
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/src/_scss/theme.scss b/src/_scss/theme.scss
@@ -1,3 +1,17 @@
+:root {
+  --color-bg: #fff;
+  --color-fg: #333;
+  --color-link: #34d;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #121212;
+    --color-fg: #e3e3e3;
+    --color-link: #bb86fc;
+  }
+}
+
 html {
   box-sizing: border-box;
   color-scheme: light dark;
@@ -10,12 +24,18 @@ html {
 }
 
 body {
+  background: var(--color-bg);
+  color: var(--color-fg);
   font-family: Merriweather, serif;
   font-size: 18px;
   line-height: 1.75;
   margin: 1em;
 }
 
+a {
+  color: var(--color-link);
+}
+
 main {
   margin-bottom: 2em;
   margin-inline: auto;