From 7f5cbf5665da1439f2348e2aabaa5e4370878a01 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Sun, 17 May 2026 20:40:53 +0200
Subject: [PATCH] Update color variables stylesheet

---
 src/App.vue                     |  7 ++++--
 src/styles/variables/colors.css | 40 ++++++++++++++++++++-------------
 2 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c283e70..c97e663 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' }" class="app-wrapper">
+    <div :class="{ dark: colorTheme === 'dark' }" id="app-wrapper">
         <Navbar />
 
         <div class="main-content">
@@ -47,9 +47,12 @@ watch(colorTheme, val => updateColorTheme(val))
     width: calc(100% - var(--main-content-padding-x) * 2);
     flex-grow: 1;
 }
-.app-wrapper {
+
+#app-wrapper {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+    background-color: var(--light-bg);
+    color: var(--dark);
 }
 </style>
\ No newline at end of file
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index 9471611..df338de 100644
--- a/src/styles/variables/colors.css
+++ b/src/styles/variables/colors.css
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-:root {
+#app-wrapper {
     --primary-color-l-8:  oklch(0.897 0.202 260);
     --primary-color-l-7:  oklch(0.847 0.202 260);
     --primary-color-l-6:  oklch(0.797 0.202 260);
@@ -74,20 +74,30 @@ limitations under the License.
     --light-d-8:            var(--white-d-8);
 
     --dark-bg:              var(--black-l-2);
-    --light-bg:             oklch(1 0 0);
+    --light-bg:             var(--white);
 }
-.dark {
-    color-scheme: dark;
-    background-color: var(--dark-bg);
-    color: var(--white-d-1);
 
-    --light:     var(--black-l-8);
-    --light-d-1: var(--black-l-7);
-    --light-d-2: var(--black-l-6);
-    --light-d-3: var(--black-l-5);
-    --light-d-4: var(--black-l-4);
-    --light-d-5: var(--black-l-3);
-    --light-d-6: var(--black-l-2);
-    --light-d-7: var(--black-l-1);
-    --light-d-8: var(--black);
+#app-wrapper.dark {
+    --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);
 }
\ No newline at end of file