Merge pull request 'Add option to adapt color scheme to the system color scheme' (#61) from feature/dynamic-dark-mode into main

Reviewed-on: #61
Reviewed-by: Jakob Gregory

src/App.vue

@@ -17,15 +17,22 @@ limitations under the License.
 <script setup>
 import Navbar from './features/nav/components/Navbar.vue';
 import Footer from './features/footer/components/Footer.vue';
+
+import { useColorScheme } from './features/colorScheme/composables/useColorScheme';
 import { ref, provide, watch } from 'vue';
 
-const isDark = ref(localStorage.getItem('theme') === 'dark');
+const { getColorScheme, updateColorScheme } = useColorScheme();
-provide('isDark', isDark);
+const colorScheme = ref(getColorScheme());
-watch(isDark, val => localStorage.setItem('theme', val ? 'dark' : 'light'));
+provide('colorScheme', colorScheme);
+watch(colorScheme, val => updateColorScheme(val))
 </script>
 
 <template>
-    <div :class="{ dark: isDark }" class="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 />
 
         <div class="main-content">
@@ -44,9 +51,12 @@ watch(isDark, val => localStorage.setItem('theme', val ? 'dark' : 'light'));
     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>

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -0,0 +1,69 @@
+<!--
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<script setup>
+import { inject } from 'vue';
+
+const colorScheme = inject('colorScheme');
+
+const colorSchemeNextMapper = {
+    'light': 'dark',
+    'dark': 'auto',
+    'auto': 'light'
+};
+
+const colorSchemeTextMapper = {
+    'light': 'Switch to light mode',
+    'dark': 'Switch to dark mode',
+    'auto': 'Switch to the system scheme'
+}
+
+const colorSchemeIconMapper = {
+    'dark': '⏾',
+    'light': '☀',
+    'auto': '◐'
+}
+</script>
+
+<template>
+    <button class="color-scheme-button"
+        @click="colorScheme = colorSchemeNextMapper[colorScheme]"
+        :aria-label="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
+        :title="colorSchemeTextMapper[colorSchemeNextMapper[colorScheme]]"
+    >
+        {{ colorSchemeIconMapper[colorSchemeNextMapper[colorScheme]] }}
+    </button>
+</template>
+
+<style scoped>
+.color-scheme-button {
+    background: none;
+    border: 1.5px solid var(--light-d-3);
+    border-radius: 50%;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--dark);
+}
+
+.color-scheme-button:hover {
+    background: var(--light-d-2);
+}
+</style>

src/features/colorScheme/composables/useColorScheme.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+export const useColorScheme = function () {
+    const getColorScheme = function () {
+        let colorScheme = localStorage.getItem('colorScheme') || 'auto';
+        if (!(colorScheme === 'dark' || colorScheme === 'light' || colorScheme === 'auto')) {
+            colorScheme = 'auto';
+        };
+        return colorScheme;
+    };
+
+    const updateColorScheme = function (newScheme) {
+        let actualNewScheme = newScheme;
+        if (!(actualNewScheme === 'dark' || actualNewScheme === 'light' || actualNewScheme === 'auto')) {
+            actualNewScheme = 'auto';
+        };
+
+        localStorage.setItem('colorScheme', actualNewScheme);
+    };
+
+    return {
+        getColorScheme,
+        updateColorScheme
+    };
+};

src/features/nav/components/Navbar.vue

@@ -15,10 +15,9 @@ limitations under the License.
 -->
 
 <script setup>
-import { inject } from 'vue';
+import ColorSchemeButton from '@/features/colorScheme/components/ColorSchemeButton.vue';
-import logo from '@/assets/logo.svg';
 
-const isDark = inject('isDark');
+import logo from '@/assets/logo.svg';
 </script>
 <template>
     <nav class="global-nav">
@@ -27,12 +26,7 @@ const isDark = inject('isDark');
         </RouterLink>
     <ul class="right-links">
         <li>
-            <button class="dark-mode-toggle"
+            <ColorSchemeButton />
-                @click="isDark = !isDark"
-                :aria-label="isDark ? 'Light mode' : 'Dark mode'">
-                <span v-if="isDark">☀</span>
-                <span v-else>⏾</span>
-            </button>
         </li>
     </ul>
     </nav>
@@ -62,22 +56,7 @@ const isDark = inject('isDark');
 .global-nav .right-links a:hover{
     text-decoration: underline;
 }
-.dark-mode-toggle {
-    background: none;
-    border: 1.5px solid var(--light-d-3);
-    border-radius: 50%;
-    width: 36px;
-    height: 36px;
-    cursor: pointer;
-    font-size: 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
 
-.dark-mode-toggle:hover {
-    background: var(--light-d-2);
-}
 .nav-logo {
     height: 24px;
     width: auto;

src/styles/common.css

@@ -19,12 +19,6 @@ body {
     font-size: 16px;
 }
 
-#app {
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-
 .link {
     text-decoration: none;
 }
@@ -32,3 +26,7 @@ body {
 .link:hover:not(.button-link) {
     text-decoration: underline;
 }
+
+input {
+    color: var(--dark);
+}

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,57 @@ 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);
+@media (prefers-color-scheme: dark) {
-    --light-d-1: var(--black-l-7);
+    #app-wrapper.color-scheme-auto {
-    --light-d-2: var(--black-l-6);
+        --dark-l-8:             var(--white-d-8);
-    --light-d-3: var(--black-l-5);
+        --dark-l-7:             var(--white-d-7);
-    --light-d-4: var(--black-l-4);
+        --dark-l-6:             var(--white-d-6);
-    --light-d-5: var(--black-l-3);
+        --dark-l-5:             var(--white-d-5);
-    --light-d-6: var(--black-l-2);
+        --dark-l-4:             var(--white-d-4);
-    --light-d-7: var(--black-l-1);
+        --dark-l-3:             var(--white-d-3);
-    --light-d-8: var(--black);
+        --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);
+    --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);
 }