Add dark mode

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/header.scss

@@ -2,7 +2,8 @@
   padding: 2rem;
 
   .header-container {
-    max-width: $maxwidth;
+    max-width: var(--width-max);
+
     width: 100%;
     margin: 0 auto;
 
@@ -47,7 +48,7 @@
   }
 }
 
-@media (max-width: $mobilewidth) {
+@media (max-width: var(--width-mobile)) {
   $nav-toggle-label-height: 0.75rem;
   $nav-toggle-label-width: 1.5rem;
   $nav-toggle-span-height: 0.125rem;
@@ -69,7 +70,7 @@
         justify-content: center;
 
         opacity: 0;
-        background: $color-bg;
+        background: var(--color-bg);
         transition: opacity 0.3s ease;
 
         pointer-events: none;

assets/sass/main.scss

@@ -1,11 +1,32 @@
-@import "variables";
+:root {
+  --color-bg: #ffffff;
+  --color-fg: #111111;
+  --color-accent: #007acc;
+
+  --width-mobile: 32rem;
+  --width-content: 48rem;
+  --width-max: 60rem;
+
+  --line-height: 1.5;
+  --font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg: #121212;
+    --color-fg: #f5f5f5;
+    --color-accent: #4dabf7;
+  }
+}
 
 html {
   font-size: 100%;
-  font-family:
+  font-family: var(--font-family);
-    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+  line-height: var(--line-height);
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
-  line-height: 1.5;
+  background: var(--color-bg);
+  color: var(--color-fg);
 }
 
 @import "header";

assets/sass/variables.scss

@@ -1,5 +0,0 @@
-$mobilewidth: 32rem;
-$contentwidth: 48rem;
-$maxwidth: 60rem;
-
-$color-bg: white;