29 lines
626 B
TypeScript
29 lines
626 B
TypeScript
|
// src/hooks/useTheme.ts
|
||
|
|
import { useEffect } from "react";
|
||
|
|
import { useAtom } from "jotai";
|
||
|
|
import { themeAtom } from "../atoms";
|
||
|
|
|
||
|
|
const ALL_THEMES = ["light", "dark", "red"];
|
||
|
|
|
||
|
|
export function useTheme() {
|
||
|
|
const [theme, setTheme] = useAtom(themeAtom);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const body = document.body;
|
||
|
|
ALL_THEMES.forEach((t) => body.classList.remove(t));
|
||
|
|
body.classList.add(theme);
|
||
|
|
console.log('set ', theme)
|
||
|
|
}, [theme]);
|
||
|
|
|
||
|
|
const toggleTheme = () => {
|
||
|
|
setTheme((prev) => (prev === "light" ? "dark" : "light"));
|
||
|
|
};
|
||
|
|
|
||
|
|
return {
|
||
|
|
theme,
|
||
|
|
setTheme,
|
||
|
|
toggleTheme,
|
||
|
|
themes: ALL_THEMES,
|
||
|
|
};
|
||
|
|
}
|