34 lines
745 B
TypeScript
34 lines
745 B
TypeScript
export const useThemes = () => {
|
|
const { $appHelpers } = useNuxtApp();
|
|
|
|
const themeCookie = useCookie<'light' | 'dark'>($appHelpers.COOKIES_THEME_KEY || 'schon-theme', {
|
|
default: () => 'light',
|
|
path: '/',
|
|
});
|
|
|
|
const theme = ref<'light' | 'dark'>(themeCookie.value);
|
|
|
|
const applyTheme = (newTheme: 'light' | 'dark') => {
|
|
theme.value = newTheme;
|
|
themeCookie.value = newTheme;
|
|
|
|
if (import.meta.client) {
|
|
const html = document.documentElement;
|
|
if (newTheme === 'dark') {
|
|
html.classList.add('dark');
|
|
} else {
|
|
html.classList.remove('dark');
|
|
}
|
|
}
|
|
};
|
|
|
|
const toggleTheme = () => {
|
|
applyTheme(theme.value === 'light' ? 'dark' : 'light');
|
|
};
|
|
|
|
return {
|
|
theme: readonly(theme),
|
|
applyTheme,
|
|
toggleTheme,
|
|
};
|
|
};
|