aboutsummaryrefslogtreecommitdiff
path: root/src/ThemeContext.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/ThemeContext.tsx')
-rw-r--r--src/ThemeContext.tsx44
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