generated from Seekra/repository-template
Add option to adapt color scheme to the system color scheme #61
+2
-2
@@ -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
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user