| import React, { createContext, useContext, useState, useEffect } from 'react'; |
|
|
| const ThemeContext = createContext(); |
|
|
| export const useTheme = () => { |
| const context = useContext(ThemeContext); |
| if (!context) { |
| throw new Error('useTheme must be used within a ThemeProvider'); |
| } |
| return context; |
| }; |
|
|
| export const ThemeProvider = ({ children }) => { |
| const [isDark, setIsDark] = useState(() => { |
| const savedTheme = localStorage.getItem('theme'); |
| return savedTheme ? savedTheme === 'dark' : |
| window.matchMedia('(prefers-color-scheme: dark)').matches; |
| }); |
|
|
| useEffect(() => { |
| if (isDark) { |
| document.documentElement.classList.add('dark'); |
| } else { |
| document.documentElement.classList.remove('dark'); |
| } |
| localStorage.setItem('theme', isDark ? 'dark' : 'light'); |
| }, [isDark]); |
|
|
| const toggleTheme = () => { |
| setIsDark(!isDark); |
| }; |
|
|
| const value = { |
| isDark, |
| toggleTheme |
| }; |
|
|
| return ( |
| <ThemeContext.Provider value={value}> |
| {children} |
| </ThemeContext.Provider> |
| ); |
| }; |
