From 678c41e990968a51563e46ab9c32c32a5805542d Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Sun, 17 May 2026 20:43:13 +0200
Subject: [PATCH] Set dark mode dynamically

---
 src/App.vue                     |  2 +-
 src/styles/variables/colors.css | 27 +++++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index c97e663..030889f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,7 +28,7 @@ watch(colorTheme, val => updateColorTheme(val))
 </script>
 
 <template>
-    <div :class="{ dark: colorTheme === 'dark' }" id="app-wrapper">
+    <div :class="{ dark: colorTheme === 'dark', 'color-scheme-auto': colorTheme === 'auto' }" id="app-wrapper">
         <Navbar />
 
         <div class="main-content">
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index df338de..ab7ed28 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -77,6 +77,33 @@ limitations under the License.
     --light-bg:             var(--white);
 }
 
+@media (prefers-color-scheme: dark) {
+    #app-wrapper.color-scheme-auto {
+        --dark-l-8:             var(--white-d-8);
+        --dark-l-7:             var(--white-d-7);
+        --dark-l-6:             var(--white-d-6);
+        --dark-l-5:             var(--white-d-5);
+        --dark-l-4:             var(--white-d-4);
+        --dark-l-3:             var(--white-d-3);
+        --dark-l-2:             var(--white-d-2);
+        --dark-l-1:             var(--white-d-1);
+        --dark:                 var(--white);
+        
+        --light:                var(--black);
+        --light-d-1:            var(--black-l-1);
+        --light-d-2:            var(--black-l-2);
+        --light-d-3:            var(--black-l-3);
+        --light-d-4:            var(--black-l-4);
+        --light-d-5:            var(--black-l-5);
+        --light-d-6:            var(--black-l-6);
+        --light-d-7:            var(--black-l-7);
+        --light-d-8:            var(--black-l-8);
+        
+        --dark-bg:              var(--white);
+        --light-bg:             var(--black);
+    }
+}
+
 #app-wrapper.dark {
     --dark-l-8:             var(--white-d-8);
     --dark-l-7:             var(--white-d-7);