Dark Mode Toggle Snippet
Flip the live switch, then copy the CSS + JS that powers it — with system-preference and saved-choice support. Free, no sign-up.
Why CSS variables
Driving colours through custom properties means one attribute on <html> repaints
the whole site — no per-component theme logic. It also plays nicely with
prefers-color-scheme, so you honour the visitor’s system setting on arrival and let
their manual toggle take over from there.
Frequently asked questions
How does a dark mode toggle work?
You define your colours as CSS custom properties, override them under a [data-theme="dark"] selector, and a small script flips that attribute on the root element. The choice is saved to localStorage so it persists.
How do I use this snippet?
Copy the snippet, paste the CSS and script into your site, and add the button anywhere. It respects the visitor’s system preference on first visit, then remembers their manual choice.
Does it respect the operating-system theme?
Yes. On first load it reads prefers-color-scheme, so users who prefer dark get dark automatically; after that, their toggle choice wins.
Is this tool free?
Yes — it runs in your browser, is free, and needs no sign-up.