test(settings): add describe to settingsValidator test

src/App.vue

@@ -18,40 +18,21 @@ limitations under the License.
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
 
-import { updatePageTitle } from './router';
 import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
-import { ref, provide, watch, watchEffect } from 'vue';
+import { ref, provide, watch } from 'vue';
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
 
 const { getColorScheme, updateColorScheme } = useColorScheme();
 const colorScheme = ref(getColorScheme());
 provide('colorScheme', colorScheme);
-watch(colorScheme, (newValue) => {
+watch(colorScheme, val => updateColorScheme(val))
-    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');
-    }
-});
-
-watchEffect(() => updatePageTitle(route));
 </script>
 
 <template>
-    <div id="app-wrapper">
+    <div
+        :style="{ colorScheme: colorScheme === 'auto' ? 'normal' : (colorScheme === 'dark' ? 'dark' : 'light')}"
+        :class="{ dark: colorScheme === 'dark', 'color-scheme-auto': colorScheme === 'auto' }"
+        id="app-wrapper"
+    >
         <Navbar />
 
         <router-view class="main-content" />

src/router/index.js

@@ -59,17 +59,18 @@ const router = createRouter({
     routes
 });
 
-export const updatePageTitle = function updatePageTitle (route) {
+// set page title
+router.afterEach(to => {
     const title =
-        typeof route.meta.title === 'function'
+        typeof to.meta.title === 'function'
-        ? route.meta.title(route)
+        ? to.meta.title(to)
-        : route.meta.title;
+        : to.meta.title;
 
     if (title) {
         document.title = `${title} - Seekra`;
     } else {
         document.title = 'Seekra';
     };
-};
+});
 
 export default router;

src/styles/common.css

@@ -15,8 +15,6 @@ limitations under the License.
 */
 
 body {
-    background-color: var(--light-bg);
-    color: var(--dark);
     margin: 0;
     font-size: 16px;
 }

src/styles/variables/colors.css

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-body {
+#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);
@@ -87,7 +87,7 @@ body {
 }
 
 @media (prefers-color-scheme: dark) {
-    body.color-scheme-auto {
+    #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);
@@ -121,7 +121,7 @@ body {
     }
 }
 
-body.dark {
+#app-wrapper.dark {
     --dark-l-8:             var(--white-d-8);
     --dark-l-7:             var(--white-d-7);
     --dark-l-6:             var(--white-d-6);