feat(color-scheme): make color scheme a setting

The color scheme now uses settings to store the currect color scheme.

src/App.vue

@@ -19,34 +19,36 @@ 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 { useSettings } from './features/settings/composables/useSettings.js';
-import { ref, provide, watch, watchEffect } from 'vue';
+import { computed, watch, watchEffect } from 'vue';
 import { useRoute } from 'vue-router';
 
 const route = useRoute();
 
-const { getColorScheme, updateColorScheme } = useColorScheme();
+const { getSetting } = useSettings();
-const colorScheme = ref(null);
+const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
-provide('colorScheme', colorScheme);
+
-watch(colorScheme, (newValue) => {
+const updateColorScheme = function updateColorScheme (newColorScheme) {
-    updateColorScheme(newValue);
     document.body.style.setProperty(colorScheme, {
         auto: 'normal',
         dark: 'dark',
         light: 'light'
     });
-    if (newValue === 'dark') {
+    if (newColorScheme === 'dark') {
         document.body.classList.add('dark');
     } else {
         document.body.classList.remove('dark');
     }
-    if (newValue === 'auto') {
+    if (newColorScheme === 'auto') {
         document.body.classList.add('color-scheme-auto');
     } else {
         document.body.classList.remove('color-scheme-auto');
     }
+}
+watch(colorScheme, (newColorScheme) => {
+    updateColorScheme(newColorScheme);
 });
-colorScheme.value = getColorScheme();
+updateColorScheme(colorScheme.value);
 
 watchEffect(() => updatePageTitle(route));
 </script>

src/features/colorScheme/components/ColorSchemeButton.vue

@@ -17,12 +17,14 @@ limitations under the License.
 <script setup>
 import Icon from '@/features/icons/components/Icon.vue';
 
-import { inject } from 'vue';
+import { useSettings } from '@/features/settings/composables/useSettings';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
+const { getSetting, setSetting } = useSettings();
 
-const colorScheme = inject('colorScheme');
+const colorScheme = computed(() => getSetting(['appearance', 'colorScheme']));
 
 const colorSchemeNextMapper = {
     'light': 'dark',
@@ -39,11 +41,15 @@ const colorSchemeIconMapper = {
 const getTooltipTranslation = function (colorScheme) {
     return t(`preferences.colorScheme.switch.${colorSchemeNextMapper[colorScheme]}`);
 };
+
+const setColorScheme = function setColorScheme (newColorScheme) {
+    setSetting(['appearance', 'colorScheme'], newColorScheme);
+};
 </script>
 
 <template>
     <button class="color-scheme-button"
-        @click="colorScheme = colorSchemeNextMapper[colorScheme]"
+        @click="setColorScheme(colorSchemeNextMapper[colorScheme])"
         :aria-label="getTooltipTranslation(colorScheme)"
         :title="getTooltipTranslation(colorScheme)"
     >