| import React, { createContext, useContext, useEffect, useState } from 'react'; | |
| const ThemeContext = createContext(); | |
| export function ThemeProvider({ children }) { | |
| const [theme, setTheme] = useState(() => { | |
| return localStorage.getItem('diffweave_theme') || 'dark'; | |
| }); | |
| useEffect(() => { | |
| const root = document.documentElement; | |
| if (theme === 'light') { | |
| root.classList.remove('dark'); | |
| root.classList.add('light'); | |
| } else { | |
| root.classList.add('dark'); | |
| root.classList.remove('light'); | |
| } | |
| localStorage.setItem('diffweave_theme', theme); | |
| }, [theme]); | |
| const toggleTheme = () => { | |
| setTheme((prev) => (prev === 'dark' ? 'light' : 'dark')); | |
| }; | |
| return ( | |
| <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}> | |
| {children} | |
| </ThemeContext.Provider> | |
| ); | |
| } | |
| export const useTheme = () => { | |
| const context = useContext(ThemeContext); | |
| if (!context) { | |
| return { theme: 'dark', setTheme: () => {}, toggleTheme: () => {} }; | |
| } | |
| return context; | |
| }; | |