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;