From d41c32f57f3b25ef22bd2cb4b8de6c6f7ef47ce2 Mon Sep 17 00:00:00 2001
From: Janis <janis.e.20@gmx.de>
Date: Wed, 29 Oct 2025 11:06:30 +0100
Subject: [PATCH] feat(ui): implement CSS variables for theme support

---
 knockoutwhistweb/app/assets/stylesheets/dark-mode.less  | 8 ++++++--
 knockoutwhistweb/app/assets/stylesheets/light-mode.less | 6 ++++--
 knockoutwhistweb/app/assets/stylesheets/main.less       | 5 +++++
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/knockoutwhistweb/app/assets/stylesheets/dark-mode.less b/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
index 1762a89..6249ca9 100644
--- a/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
+++ b/knockoutwhistweb/app/assets/stylesheets/dark-mode.less
@@ -1,2 +1,6 @@
-@background-image: url('/assets/images/background.png');
-@color: white;
\ No newline at end of file
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-image: url('/assets/images/background.png');
+    --color: white;
+  }
+}
diff --git a/knockoutwhistweb/app/assets/stylesheets/light-mode.less b/knockoutwhistweb/app/assets/stylesheets/light-mode.less
index 483113e..27c5be4 100644
--- a/knockoutwhistweb/app/assets/stylesheets/light-mode.less
+++ b/knockoutwhistweb/app/assets/stylesheets/light-mode.less
@@ -1,2 +1,4 @@
-@background-image: url('/assets/images/img.png');
-@color: black;
\ No newline at end of file
+:root {
+  --background-image: url('/assets/images/img.png');
+  --color: black;
+}
diff --git a/knockoutwhistweb/app/assets/stylesheets/main.less b/knockoutwhistweb/app/assets/stylesheets/main.less
index 64e18f6..dfd5d67 100644
--- a/knockoutwhistweb/app/assets/stylesheets/main.less
+++ b/knockoutwhistweb/app/assets/stylesheets/main.less
@@ -1,4 +1,9 @@
 @import "light-mode.less";
+@import "dark-mode.less";
+
+@background-image: var(--background-image);
+@color: var(--color);
+
 body {
     background-image: @background-image;
     background-size: 100vw 100vh;