44 lines
1 KiB
TypeScript
44 lines
1 KiB
TypeScript
'use client';
|
|
|
|
import React, { createContext, useCallback, useContext, useState } from "react";
|
|
|
|
type Theme = 'dark' | 'light';
|
|
|
|
interface ThemeContextType {
|
|
theme: Theme;
|
|
setTheme: (theme: Theme) => void;
|
|
}
|
|
|
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
|
|
|
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
const [theme, setTheme] = useState<Theme>("dark")
|
|
|
|
const changeTheme = useCallback((theme: Theme) => {
|
|
const root = window.document.documentElement
|
|
root.classList.remove("light", "dark")
|
|
root.classList.add(theme)
|
|
}, [])
|
|
|
|
const updateTheme = useCallback((theme: Theme) => {
|
|
setTheme(theme)
|
|
changeTheme(theme)
|
|
}, [changeTheme, setTheme])
|
|
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ theme, setTheme: updateTheme }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
};
|
|
|
|
export function useTheme() {
|
|
const context = useContext(ThemeContext);
|
|
if (!context) {
|
|
throw new Error('useTheme must be used within a ThemeProvider');
|
|
}
|
|
return context;
|
|
}
|
|
|