67 lines
1.6 KiB
TypeScript
67 lines
1.6 KiB
TypeScript
type ThemeMode = "light" | "dark";
|
|
|
|
const STORAGE_KEY = "signals-theme";
|
|
|
|
const themes: Record<ThemeMode, { background: string; surface: string }> = {
|
|
light: {
|
|
background: "#f3f6fb",
|
|
surface: "#ffffff"
|
|
},
|
|
dark: {
|
|
background: "#0f172a",
|
|
surface: "#162033"
|
|
}
|
|
};
|
|
|
|
export const useTheme = () => {
|
|
const theme = useState<ThemeMode>("theme-mode", () => "light");
|
|
const initialized = useState("theme-initialized", () => false);
|
|
|
|
const applyTheme = (nextTheme: ThemeMode) => {
|
|
if (!process.client) {
|
|
return;
|
|
}
|
|
|
|
theme.value = nextTheme;
|
|
|
|
const root = document.documentElement;
|
|
root.dataset.theme = nextTheme;
|
|
root.style.colorScheme = nextTheme;
|
|
root.classList.toggle("app-dark", nextTheme === "dark");
|
|
|
|
localStorage.setItem(STORAGE_KEY, nextTheme);
|
|
|
|
const themeMeta = document.querySelector('meta[name="theme-color"]');
|
|
const themeColor = themes[nextTheme].surface;
|
|
|
|
if (themeMeta) {
|
|
themeMeta.setAttribute("content", themeColor);
|
|
}
|
|
|
|
document.body.style.backgroundColor = themes[nextTheme].background;
|
|
};
|
|
|
|
const initializeTheme = () => {
|
|
if (!process.client || initialized.value) {
|
|
return;
|
|
}
|
|
|
|
const storedTheme = localStorage.getItem(STORAGE_KEY);
|
|
const nextTheme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : "light";
|
|
|
|
applyTheme(nextTheme);
|
|
initialized.value = true;
|
|
};
|
|
|
|
const toggleTheme = () => {
|
|
applyTheme(theme.value === "dark" ? "light" : "dark");
|
|
};
|
|
|
|
return {
|
|
theme: readonly(theme),
|
|
initializeTheme,
|
|
applyTheme,
|
|
toggleTheme
|
|
};
|
|
};
|