32 lines
788 B
TypeScript
32 lines
788 B
TypeScript
export type ThemeMode = "light" | "dark" | "auto";
|
|
|
|
const STORAGE_KEY = "app-theme-mode";
|
|
|
|
export function useTheme() {
|
|
const prefersDark = usePreferredDark();
|
|
const theme = useStorage<ThemeMode>(STORAGE_KEY, "auto");
|
|
|
|
const isDark = computed(() => {
|
|
if (theme.value === "auto") {
|
|
return prefersDark.value;
|
|
}
|
|
return theme.value === "dark";
|
|
});
|
|
|
|
watch(isDark, (dark) => {
|
|
if (dark) {
|
|
document.documentElement.classList.toggle("ion-palette-dark", dark);
|
|
document.documentElement.classList.remove("ion-palette-light");
|
|
}
|
|
else {
|
|
document.documentElement.classList.remove("ion-palette-dark");
|
|
document.documentElement.classList.add("ion-palette-light");
|
|
}
|
|
}, { immediate: true });
|
|
|
|
return {
|
|
theme,
|
|
isDark,
|
|
};
|
|
}
|