The Theme-Switcher Context I Drop Into Every App

// ThemeProvider: the bare bones I always start with. Holds a theme name in
// state, exposes { theme, setTheme, toggle }, and writes the active token map
// to documentElement as CSS variables so any component can `var(--bg)`.
const { useState, useEffect, useContext, useCallback, useMemo, createContext } = (typeof React !== 'undefined' ? React : {
    useState: (init) => {
        let v = typeof init === 'function' ? init() : init;
        return [v, (next) => { v = typeof next === 'function' ? next(v) : next; return v; }];
    },
    useEffect: (fn) => { const c = fn(); return c; },
    useContext: (ctx) => ctx._currentValue,
    useCallback: (f) => f,
    useMemo: (f) => f(),
    createContext: (def) => ({ _currentValue: def, Provider: ({ value, children }) => { ctx => ctx; return children; } }),
});

const THEMES = {
    light: { '--bg': '#ffffff', '--fg': '#111418', '--accent': '#2b6cb0' },
    dark: { '--bg': '#0b0b0c', '--fg': '#f5f5f7', '--accent': '#7aa9d8' },
};

const ThemeContext = createContext({ theme: 'light', setTheme: () => {}, toggle: () => {} });

function applyTokens(theme) {
    const tokens = THEMES[theme] || THEMES.light;
    const root = (typeof document !== 'undefined' && document.documentElement) || null;
    const setter = root && root.style && typeof root.style.setProperty === 'function' ? root.style.setProperty.bind(root.style) : null;
    if (!setter) {
        // Stand-in for the playground. In a real app the next three lines are the whole effect.
        console.log('would apply tokens for', theme + ':', tokens);
        return;
    }
    for (const key of Object.keys(tokens)) setter(key, tokens[key]);
}

function ThemeProvider(initialTheme) {
    const [theme, setTheme] = useState(initialTheme || 'light');
    useEffect(() => { applyTokens(theme); }, [theme]);
    const toggle = useCallback(() => setTheme((t) => (t === 'light' ? 'dark' : 'light')), []);
    const value = useMemo(() => ({ theme, setTheme, toggle }), [theme, toggle]);
    return value;
}

function useTheme() { return useContext(ThemeContext); }

// Drive it without a real renderer.
const api = ThemeProvider('light');
console.log('initial theme:', api.theme);
console.log('hook surface:', Object.keys(api).sort().join(', '));
api.toggle();
console.log('typeof useTheme:', typeof useTheme);

// Hydration order: localStorage wins (user has chosen), otherwise the OS hint,
// otherwise 'light'. Subscribe to OS-level changes so the system toggle still
// works for users who never opened our settings menu.
const { useState, useEffect, useCallback } = (typeof React !== 'undefined' ? React : {
    useState: (init) => {
        let v = typeof init === 'function' ? init() : init;
        return [v, (n) => { v = typeof n === 'function' ? n(v) : n; return v; }];
    },
    useEffect: (fn) => { const c = fn(); return typeof c === 'function' ? c : undefined; },
    useCallback: (f) => f,
});

// Tiny in-memory shims so the snippet runs anywhere.
const storageBacking = { theme: null };
const storage = (typeof localStorage !== 'undefined') ? localStorage : {
    getItem: (k) => storageBacking[k],
    setItem: (k, v) => { storageBacking[k] = v; },
};
const matchMediaShim = (typeof matchMedia !== 'undefined') ? matchMedia : (q) => ({
    matches: false,
    media: q,
    addEventListener: () => {},
    removeEventListener: () => {},
});

function resolveInitialTheme() {
    const stored = storage.getItem('theme');
    if (stored === 'light' || stored === 'dark') return stored;
    return matchMediaShim('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

function usePersistentTheme() {
    const [theme, setTheme] = useState(resolveInitialTheme);
    // Persist user choice on every change.
    useEffect(() => { storage.setItem('theme', theme); }, [theme]);
    // Subscribe to OS toggle. Only act if the user has not pinned a preference.
    useEffect(() => {
        const mq = matchMediaShim('(prefers-color-scheme: dark)');
        function onChange(e) {
            if (storage.getItem('theme')) return;
            setTheme(e.matches ? 'dark' : 'light');
        }
        mq.addEventListener && mq.addEventListener('change', onChange);
        return () => { mq.removeEventListener && mq.removeEventListener('change', onChange); };
    }, []);
    const toggle = useCallback(() => setTheme((t) => (t === 'light' ? 'dark' : 'light')), []);
    return { theme, setTheme, toggle };
}

const api = usePersistentTheme();
console.log('hydrated theme:', api.theme);
console.log('storage now holds:', storage.getItem('theme'));
api.setTheme('dark');
console.log('after setTheme(dark) ->', storage.getItem('theme'));

// The consumer side. No JSX in the playground (Babel runs without the JSX
// preset), so the component is built with React.createElement.
const { useState, useEffect, useCallback, useMemo, useContext, createContext, createElement } = (typeof React !== 'undefined' ? React : {
    useState: (init) => {
        let v = typeof init === 'function' ? init() : init;
        return [v, (n) => { v = typeof n === 'function' ? n(v) : n; return v; }];
    },
    useEffect: () => {},
    useCallback: (f) => f,
    useMemo: (f) => f(),
    useContext: (ctx) => ctx._currentValue,
    createContext: (def) => ({ _currentValue: def }),
    createElement: (type, props, ...kids) => ({ type, props: props || {}, children: kids }),
});

const ThemeContext = createContext({ theme: 'light', toggle: () => {} });

function useTheme() { return useContext(ThemeContext); }

function ThemeToggle() {
    const { theme, toggle } = useTheme();
    const label = theme === 'light' ? 'Switch to dark' : 'Switch to light';
    // <button onClick={toggle} aria-label="theme toggle">{label}</button>
    return createElement('button', { onClick: toggle, 'aria-label': 'theme toggle' }, label);
}

// Drive a single render. Pretend the provider has wired the context value.
ThemeContext._currentValue = {
    theme: 'light',
    toggle: () => { ThemeContext._currentValue.theme = 'dark'; },
};
const rendered = ThemeToggle();
console.log('rendered tag:', rendered.type);
console.log('rendered label:', rendered.children[0]);
console.log('aria-label:', rendered.props['aria-label']);
ThemeContext._currentValue.toggle();
const rendered2 = ThemeToggle();
console.log('after toggle, label is:', rendered2.children[0]);