All files / src/context ThemeContext.jsx

95.55% Statements 43/45
87.5% Branches 7/8
40% Functions 2/5
95.55% Lines 43/45

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 461x 1x 1x 1x 1x 1x 1x 1x 1x 1x 22x 18x 18x 18x 18x 17x 17x 22x 22x 22x 18x 18x 18x 18x 18x 17x 17x 22x 22x 22x     22x 22x 22x 22x 22x 22x 22x 22x 22x 1x 1x 1x 1x  
import React, { createContext, useState, useEffect, useContext } from "react";
 
const ThemeContext = createContext({
    mode: "dark",
    isDark: true,
    toggleMode: () => { },
    setMode: () => { }
});
 
export const ThemeProvider = ({ children }) => {
    const [mode, setMode] = useState(() => {
        try {
            const saved = localStorage.getItem("gdbui-mode");
            return saved === "light" ? "light" : "dark";
        } catch (e) {
            return "dark";
        }
    });
 
    useEffect(() => {
        try {
            const root = document.documentElement;
            root.setAttribute("data-mode", mode);
            localStorage.setItem("gdbui-mode", mode);
        } catch (e) {
            // Silently fail in environments without localStorage/DOM
        }
    }, [mode]);
 
    const toggleMode = () => {
        setMode((prev) => (prev === "dark" ? "light" : "dark"));
    };
 
    const isDark = mode === "dark";
 
    return (
        <ThemeContext.Provider value={{ mode, isDark, toggleMode, setMode }}>
            {children}
        </ThemeContext.Provider>
    );
};
 
export const useTheme = () => useContext(ThemeContext);
 
export default ThemeProvider;