Spaces:
Running
Running
| 'use client'; | |
| import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'; | |
| type Theme = 'light' | 'dark'; | |
| interface ThemeContextType { | |
| theme: Theme; | |
| toggle: () => void; | |
| setTheme: (t: Theme) => void; | |
| } | |
| const ThemeContext = createContext<ThemeContextType>({ | |
| theme: 'light', | |
| toggle: () => {}, | |
| setTheme: () => {}, | |
| }); | |
| function getInitialTheme(): Theme { | |
| if (typeof window === 'undefined') return 'light'; | |
| const stored = localStorage.getItem('bio-nexus-theme') as Theme | null; | |
| if (stored === 'light' || stored === 'dark') return stored; | |
| return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; | |
| } | |
| export function ThemeProvider({ children }: { children: ReactNode }) { | |
| const [theme, setThemeState] = useState<Theme>('light'); | |
| useEffect(() => { | |
| setThemeState(getInitialTheme()); | |
| }, []); | |
| useEffect(() => { | |
| const root = document.documentElement; | |
| root.classList.toggle('dark', theme === 'dark'); | |
| localStorage.setItem('bio-nexus-theme', theme); | |
| }, [theme]); | |
| const toggle = () => setThemeState((t) => (t === 'dark' ? 'light' : 'dark')); | |
| const setTheme = (t: Theme) => setThemeState(t); | |
| return ( | |
| <ThemeContext.Provider value={{ theme, toggle, setTheme }}> | |
| {children} | |
| </ThemeContext.Provider> | |
| ); | |
| } | |
| export const useTheme = () => useContext(ThemeContext); | |