From 370e77f1a66653f2e4a89fe310a85e20c1bb11a2 Mon Sep 17 00:00:00 2001
From: lukas <lukas.harat@protonmail.com>
Date: Sun, 13 Sep 2026 19:33:31 +0200
Subject: [PATCH] Add dark mode based on device color-scheme preference

Move the color palette into CSS custom properties (:root in
globals.scss) with a prefers-color-scheme: dark override, and point the
existing $color-* Sass variables at them so every component picks up
dark mode automatically. Replaced the handful of rgba($color, alpha)
call sites with color-mix(), since Sass can't alpha-blend a color that's
now a CSS variable at compile time.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 src/routes/__root.module.scss        |  4 ++--
 src/routes/admin/kitchen.module.scss |  4 ++--
 src/styles/_variables.scss           | 22 +++++++++++++---------
 src/styles/globals.scss              | 28 ++++++++++++++++++++++++++++
 4 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/routes/__root.module.scss b/src/routes/__root.module.scss
index ad67b58..1af8d88 100644
--- a/src/routes/__root.module.scss
+++ b/src/routes/__root.module.scss
@@ -14,10 +14,10 @@
   justify-content: space-between;
   align-items: center;
   padding: $space-3;
-  background: rgba($color-background, 0.3);
+  background: color-mix(in srgb, $color-background 30%, transparent);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  border-bottom: 1px solid rgba($color-border, 0.3);
+  border-bottom: 1px solid color-mix(in srgb, $color-border 30%, transparent);
 }
 
 .brand {
diff --git a/src/routes/admin/kitchen.module.scss b/src/routes/admin/kitchen.module.scss
index 8425a07..60d1080 100644
--- a/src/routes/admin/kitchen.module.scss
+++ b/src/routes/admin/kitchen.module.scss
@@ -93,12 +93,12 @@
 }
 
 .statusIdle {
-  background: rgba($color-success, 0.12);
+  background: color-mix(in srgb, $color-success 12%, transparent);
   color: $color-success;
 }
 
 .statusBusy {
-  background: rgba($color-primary, 0.12);
+  background: color-mix(in srgb, $color-primary 12%, transparent);
   color: $color-primary;
 }
 
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 84ecd89..ae4faeb 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,12 +1,16 @@
-$color-text: #1a1a1a;
-$color-text-muted: #6b6b6b;
-$color-background: #ffffff;
-$color-surface: #f7f7f5;
-$color-border: #e2e0dc;
-$color-primary: #b5432b;
-$color-primary-contrast: #ffffff;
-$color-danger: #a33;
-$color-success: #2f7a4f;
+// These resolve to the CSS custom properties defined in globals.scss, which
+// swap values under `prefers-color-scheme: dark` — keep referencing them by
+// these names rather than hardcoding hex so components pick up dark mode
+// automatically.
+$color-text: var(--color-text);
+$color-text-muted: var(--color-text-muted);
+$color-background: var(--color-background);
+$color-surface: var(--color-surface);
+$color-border: var(--color-border);
+$color-primary: var(--color-primary);
+$color-primary-contrast: var(--color-primary-contrast);
+$color-danger: var(--color-danger);
+$color-success: var(--color-success);
 
 $space-1: 0.25rem;
 $space-2: 0.5rem;
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index fed4eee..6d27f55 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -1,5 +1,33 @@
 @use './variables' as *;
 
+:root {
+  --color-text: #1a1a1a;
+  --color-text-muted: #6b6b6b;
+  --color-background: #ffffff;
+  --color-surface: #f7f7f5;
+  --color-border: #e2e0dc;
+  --color-primary: #b5432b;
+  --color-primary-contrast: #ffffff;
+  --color-danger: #a33333;
+  --color-success: #2f7a4f;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text: #f2ede6;
+    --color-text-muted: #a89e8f;
+    --color-background: #16130f;
+    --color-surface: #201c17;
+    --color-border: #3a342a;
+    --color-primary: #d9694a;
+    --color-primary-contrast: #ffffff;
+    --color-danger: #ef6b62;
+    --color-success: #4fbb7c;
+    color-scheme: dark;
+  }
+}
+
 *,
 *::before,
 *::after {