# All files / src/context ThemeContext.tsx

0% Statements 0/16
0% Branches 0/6
0% Functions 0/6
0% Lines 0/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38

     import { createContext, useState, useEffect, useCallback, type ReactNode } from 'react';

    type Theme = 'light' | 'dark';

    interface ThemeContextType {
      theme: Theme;
      toggleTheme: () => void;
      setTheme: (theme: Theme) => void;
    }

    export const ThemeContext = createContext<ThemeContextType | null>(null);

    export function ThemeProvider({ children }: { children: ReactNode }) {
      const [theme, setThemeState] = useState<Theme>(() => {
        const saved = localStorage.getItem('theme') as Theme | null;
        return saved || 'light';
      });

      useEffect(() => {
        const html = document.documentElement;
        if (theme === 'dark') {
          html.classList.add('dark');
        } else {
          html.classList.remove('dark');
        }
        localStorage.setItem('theme', theme);
      }, [theme]);

      const setTheme = useCallback((t: Theme) => setThemeState(t), []);
      const toggleTheme = useCallback(() => setThemeState(t => t === 'light' ? 'dark' : 'light'), []);

      return (
        <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
          {children}
        </ThemeContext.Provider>
      );
    }