feat(color-scheme): add color scheme settings

Added an appearance settings section containing a color scheme setting and translations for that.
Merge pull request 'Feat(settings): function to get the value of a setting' (#168 ) from feature/setting-value-function into main
2026-08-06 15:24:20 +02:00 · 2026-08-06 12:50:51 +02:00 · 2026-08-06 12:50:33 +02:00 · 2026-08-06 12:50:33 +02:00 · 2026-08-06 12:50:33 +02:00 · 2026-08-06 12:50:33 +02:00
4 changed files with 61 additions and 3 deletions
@@ -26,7 +26,7 @@ import { useRoute } from 'vue-router';
 const route = useRoute();

 const { getColorScheme, updateColorScheme } = useColorScheme();
-const colorScheme = ref(getColorScheme());
+const colorScheme = ref('auto');
 provide('colorScheme', colorScheme);
 watch(colorScheme, (newValue) => {
    updateColorScheme(newValue);
@@ -46,6 +46,7 @@ watch(colorScheme, (newValue) => {
        document.body.classList.remove('color-scheme-auto');
    }
 });
+colorScheme.value = getColorScheme();

 watchEffect(() => updatePageTitle(route));
 </script>
@@ -1,3 +1,30 @@
 {
-    "contents": []
-}
+    "contents": [
+        {
+            "name": "appearance",
+            "i18n": "settings.settings.appearance.title",
+            "content": [
+                {
+                    "name": "colorScheme",
+                    "type": "selection",
+                    "i18n": "settings.settings.appearance.contents.colorScheme.title",
+                    "default": "auto",
+                    "options": [
+                        {
+                            "name": "auto",
+                            "i18n": "settings.settings.appearance.contents.colorScheme.options.auto"
+                        },
+                        {
+                            "name": "light",
+                            "i18n": "settings.settings.appearance.contents.colorScheme.options.light"
+                        },
+                        {
+                            "name": "dark",
+                            "i18n": "settings.settings.appearance.contents.colorScheme.options.dark"
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
@@ -60,6 +60,21 @@
            "option": {
                "ariaLabel": "Wählt die Option {option} aus"
            }
+        },
+        "settings": {
+            "appearance": {
+                "title": "Erscheinungsbild",
+                "contents": {
+                    "colorScheme": {
+                        "title": "Farbschema",
+                        "options": {
+                            "auto": "An Systemfarbschema anpassen",
+                            "light": "Hell",
+                            "dark": "Dunkel"
+                        }
+                    }
+                }
+            }
        }
    }
 }
@@ -60,6 +60,21 @@
            "option": {
                "ariaLabel": "Selects option {option}"
            }
+        },
+        "settings": {
+            "appearance": {
+                "title": "Appearance",
+                "contents": {
+                    "colorScheme": {
+                        "title": "Color Scheme",
+                        "options": {
+                            "auto": "Adapt to system color scheme",
+                            "light": "Light",
+                            "dark": "Dark"
+                        }
+                    }
+                }
+            }
        }
    }
 }
Author	SHA1	Message	Date
jakob.scheid	5b3034fe96	feat(color-scheme): add color scheme settings Added an appearance settings section containing a color scheme setting and translations for that.	2026-08-06 15:24:20 +02:00
jakob.scheidandGitea	7b09cd74cb	Merge pull request 'Feat(settings): function to get the value of a setting' (#168 ) from feature/setting-value-function into main Deploy on dev / Deploy on dev (push) Successful in 38s Details Reviewed-on: #168 Reviewed-by: Jakob Gregory	2026-08-06 12:50:51 +02:00
jakob.scheidandGitea	fab7d7e901	test(settings): add test cases for empty setting value return value	2026-08-06 12:50:33 +02:00
jakob.scheidandGitea	04c148a3b1	feat(settings): make setting value function synchronous Added a store to cache the settings configuration. The getSetting function from useSettings is now synchronous and uses this cache. The settings cache is set when loading the settings initially (asnychronously).	2026-08-06 12:50:33 +02:00
jakob.scheidandGitea	ff6ab7a78c	test(settings): add tests for useSettings composable Added some tests for the getSetting function from the useSettings composable.	2026-08-06 12:50:33 +02:00
jakob.scheidandGitea	294fdab550	feat(settings): add composable for settings values Added the composable useSettings that provides the function getSetting. This function returns the set value of the setting, or otherwise the default value. If there is no default value, it returns undefined.	2026-08-06 12:50:33 +02:00
jakob.scheidandGitea	26eec92f42	Merge pull request 'Fix(color-scheme): fix initial color scheme loading' (#171 ) from fix/initial-color-scheme into main Deploy on dev / Deploy on dev (push) Successful in 35s Details Reviewed-on: #171 Reviewed-by: Jakob Gregory	2026-08-06 12:50:01 +02:00
jakob.scheidandGitea	a01abe67e1	fix(color-scheme): load color scheme initially The color scheme is now loaded and set after registering the watcher to ensure that the callback is also called initially.	2026-08-06 12:48:55 +02:00