20 lines
538 B
TypeScript
20 lines
538 B
TypeScript
|
export const useTheme = () => {
|
||
|
|
const theme = ref('light');
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// Check system preference
|
||
|
|
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||
|
|
|
||
|
|
const updateTheme = (e: MediaQueryListEvent | MediaQueryList) => {
|
||
|
|
theme.value = e.matches ? 'dark' : 'light';
|
||
|
|
document.documentElement.setAttribute('data-theme', theme.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
darkModeMediaQuery.addEventListener('change', updateTheme);
|
||
|
|
updateTheme(darkModeMediaQuery);
|
||
|
|
});
|
||
|
|
|
||
|
|
return {
|
||
|
|
theme
|
||
|
|
};
|
||
|
|
};
|