# All files / src/contexts DarkModeContext.tsx

100% Statements 33/33
100% Branches 12/12
100% Functions 3/3
100% Lines 33/33

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
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    491x

    1x

    1x
    9x

    7x
    7x
    4x
    4x
    3x
    9x

    9x

    9x
    4x
    9x
    5x
    5x

    9x
    9x

    9x
    2x
    2x

    9x
    9x
    9x
    9x

    9x

    1x
    14x
    14x
    4x
    4x
    9x
    9x
     import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';

    interface DarkModeContextType {
      isDarkMode: boolean;
      toggleDarkMode: () => void;
    }

    const DarkModeContext = createContext<DarkModeContextType | undefined>(undefined);

    export function DarkModeProvider({ children }: { children: ReactNode }) {
      const [isDarkMode, setIsDarkMode] = useState(() => {
        // Check localStorage or system preference
        const saved = localStorage.getItem('darkMode');
        if (saved !== null) {
          return saved === 'true';
        }
        return window.matchMedia('(prefers-color-scheme: dark)').matches;
      });

      useEffect(() => {
        // Apply dark mode class to document
        if (isDarkMode) {
          document.documentElement.classList.add('dark');
        } else {
          document.documentElement.classList.remove('dark');
        }
        // Save preference
        localStorage.setItem('darkMode', isDarkMode.toString());
      }, [isDarkMode]);

      const toggleDarkMode = () => {
        setIsDarkMode((prev) => !prev);
      };

      return (
        <DarkModeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
          {children}
        </DarkModeContext.Provider>
      );
    }

    export function useDarkMode() {
      const context = useContext(DarkModeContext);
      if (context === undefined) {
        throw new Error('useDarkMode must be used within a DarkModeProvider');
      }
      return context;
    }