From 630a8268e32e54e222ca496d8a4e1943ce1bacaa Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Tue, 28 Jul 2026 17:45:00 +0200
Subject: [PATCH] feat(color-scheme): set color scheme on body

The color scheme is now set on the document body. The reactivity is
ensured by a watcher on the color scheme ref. The color CSS variables
are now set on the body.
---
 src/App.vue                     | 27 +++++++++++++++++++--------
 src/styles/common.css           |  2 ++
 src/styles/variables/colors.css |  6 +++---
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5044bf4..f40f23a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -24,15 +24,28 @@ import { ref, provide, watch } from 'vue';
 const { getColorScheme, updateColorScheme } = useColorScheme();
 const colorScheme = ref(getColorScheme());
 provide('colorScheme', colorScheme);
-watch(colorScheme, val => updateColorScheme(val))
+watch(colorScheme, (newValue) => {
+    updateColorScheme(newValue);
+    document.body.style.setProperty(colorScheme, {
+        auto: 'normal',
+        dark: 'dark',
+        light: 'light'
+    });
+    if (newValue === 'dark') {
+        document.body.classList.add('dark');
+    } else {
+        document.body.classList.remove('dark');
+    }
+    if (newValue === 'auto') {
+        document.body.classList.add('color-scheme-auto');
+    } else {
+        document.body.classList.remove('color-scheme-auto');
+    }
+});
 </script>
 
 <template>
-    <div
-        :style="{ colorScheme: colorScheme === 'auto' ? 'normal' : (colorScheme === 'dark' ? 'dark' : 'light')}"
-        :class="{ dark: colorScheme === 'dark', 'color-scheme-auto': colorScheme === 'auto' }"
-        id="app-wrapper"
-    >
+    <div id="app-wrapper">
         <Navbar />
 
         <router-view class="main-content" />
@@ -62,7 +75,5 @@ watch(colorScheme, val => updateColorScheme(val))
     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/common.css b/src/styles/common.css
index 976816a..3c1e88b 100644
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -15,6 +15,8 @@ limitations under the License.
 */
 
 body {
+    background-color: var(--light-bg);
+    color: var(--dark);
     margin: 0;
     font-size: 16px;
 }
diff --git a/src/styles/variables/colors.css b/src/styles/variables/colors.css
index cc2b21f..7e7e71a 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.
 */
 
-#app-wrapper {
+body {
     --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);
@@ -87,7 +87,7 @@ limitations under the License.
 }
 
 @media (prefers-color-scheme: dark) {
-    #app-wrapper.color-scheme-auto {
+    body.color-scheme-auto {
         --dark-l-8:             var(--white-d-8);
         --dark-l-7:             var(--white-d-7);
         --dark-l-6:             var(--white-d-6);
@@ -121,7 +121,7 @@ limitations under the License.
     }
 }
 
-#app-wrapper.dark {
+body.dark {
     --dark-l-8:             var(--white-d-8);
     --dark-l-7:             var(--white-d-7);
     --dark-l-6:             var(--white-d-6);