Add option to adapt color scheme to the system color scheme #61

Merged
jakob.scheid merged 12 commits from feature/dynamic-dark-mode into main 2026-05-18 16:55:41 +02:00
2 changed files with 3 additions and 8 deletions
Showing only changes of commit 555bdb0cfb - Show all commits
+2 -2
View File
@@ -21,14 +21,14 @@ import Footer from './features/footer/components/Footer.vue';
import { useColorTheme } from './features/colorTheme/composables/useColorTheme';
import { ref, provide, watch } from 'vue';
const { getColorTheme, updateColorTheme, appHasDarkClass } = useColorTheme();
const { getColorTheme, updateColorTheme } = useColorTheme();
const colorTheme = ref(getColorTheme());
provide('colorTheme', colorTheme);
watch(colorTheme, val => updateColorTheme(val))
</script>
<template>
<div :class="{ dark: appHasDarkClass(colorTheme) }" class="app-wrapper">
<div :class="{ dark: colorTheme === 'dark' }" class="app-wrapper">
<Navbar />
<div class="main-content">
@@ -32,13 +32,8 @@ export const useColorTheme = function () {
localStorage.setItem('theme', actualNewTheme);
};
const appHasDarkClass = function (colorTheme) {
return colorTheme === 'dark';
};
return {
getColorTheme,
updateColorTheme,
appHasDarkClass
updateColorTheme
};
};