diff options
Diffstat (limited to 'src/ThemeContext.tsx')
| -rw-r--r-- | src/ThemeContext.tsx | 44 |
1 files changed, 0 insertions, 44 deletions
diff --git a/src/ThemeContext.tsx b/src/ThemeContext.tsx deleted file mode 100644 index 203b70a..0000000 --- a/src/ThemeContext.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { createContext, useContext, useEffect, useState, ReactNode } from 'react'; - -type Theme = 'light' | 'dark'; - -interface ThemeContextProps { - theme: Theme; - toggleTheme: () => void; -} - -const ThemeContext = createContext<ThemeContextProps | undefined>(undefined); - -export const ThemeProvider = ({ children }: { children: ReactNode }) => { - const [theme, setTheme] = useState<Theme>(() => { - const savedTheme = localStorage.getItem('theme'); - if (savedTheme) { - return savedTheme as Theme; - } - const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; - return prefersDark ? 'dark' : 'light'; - }); - - useEffect(() => { - document.documentElement.setAttribute('data-theme', theme); - localStorage.setItem('theme', theme); - }, [theme]); - - const toggleTheme = () => { - setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : '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; -};
\ No newline at end of file |
