|
import React, { createContext, useState, useContext, ReactNode } from 'react' |
|
|
|
type Theme = 'dark' | 'light' |
|
type ThemeContextProps = { |
|
theme: Theme |
|
toggleTheme: () => void |
|
} |
|
|
|
type ThemeProviderProps = { |
|
children: ReactNode |
|
} |
|
|
|
const ThemeContext = createContext<ThemeContextProps | undefined>(undefined) |
|
|
|
export const ThemeProvider = ({ children }: ThemeProviderProps) => { |
|
const [theme, setTheme] = useState<Theme>('dark') |
|
|
|
const toggleTheme = () => { |
|
setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')) |
|
document.body.classList.toggle('light') |
|
} |
|
|
|
return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider> |
|
} |
|
|
|
export const useTheme = () => { |
|
const context = useContext(ThemeContext) |
|
if (!context) { |
|
throw new Error('useTheme must be used within a ThemeProvider') |
|
} |
|
return context |
|
} |
|
|