From 004a20caacd3a08b6c4080602fbeb2df55039974 Mon Sep 17 00:00:00 2001
From: Nikolaos Karaolidis <nick@karaolidis.com>
Date: Wed, 6 Aug 2025 09:44:27 +0200
Subject: [PATCH] Add dark mode

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
---
 assets/sass/header.scss    |  7 ++++---
 assets/sass/main.scss      | 31 ++++++++++++++++++++++++++-----
 assets/sass/variables.scss |  5 -----
 3 files changed, 30 insertions(+), 13 deletions(-)
 delete mode 100644 assets/sass/variables.scss

diff --git a/assets/sass/header.scss b/assets/sass/header.scss
index b47b0ea..4cecf7a 100644
--- a/assets/sass/header.scss
+++ b/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;
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index c6f62c2..d54dc7d 100644
--- a/assets/sass/main.scss
+++ b/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:
-    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  line-height: 1.5;
+  font-family: var(--font-family);
+  line-height: var(--line-height);
+
+  background: var(--color-bg);
+  color: var(--color-fg);
 }
 
 @import "header";
diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss
deleted file mode 100644
index 4032509..0000000
--- a/assets/sass/variables.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$mobilewidth: 32rem;
-$contentwidth: 48rem;
-$maxwidth: 60rem;
-
-$color-bg: white;