35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { useEffect } from "react";
|
|
import useLocalStorage from "./useLocalStorage";
|
|
/**
|
|
* Custom hook for managing theme state.
|
|
*
|
|
* This hook utilizes local storage to persist the theme state across sessions. It provides functionality
|
|
* to toggle between light and dark themes and automatically applies the selected theme to the document.
|
|
*
|
|
* @returns A tuple containing:
|
|
* - `isDark`: a boolean indicating whether the current theme is dark.
|
|
* - `toggleTheme`: a function to toggle the theme between light and dark.
|
|
*
|
|
* @example
|
|
* const [isDark, toggleTheme] = useTheme();
|
|
* // Use isDark to determine the theme state and toggleTheme to change the theme.
|
|
*/
|
|
const useTheme = (): [boolean, () => void] => {
|
|
const [theme, setTheme] = useLocalStorage<string>("theme", "light");
|
|
const isDark = theme === "dark";
|
|
|
|
const toggleTheme = () => {
|
|
const newTheme = theme === "light" ? "dark" : "light";
|
|
setTheme(newTheme);
|
|
document.documentElement.dataset.theme = newTheme;
|
|
};
|
|
|
|
useEffect(() => {
|
|
document.documentElement.dataset.theme = theme;
|
|
}, [theme]);
|
|
|
|
return [isDark, toggleTheme];
|
|
};
|
|
|
|
export default useTheme;
|