CSS Dark Mode Toggle Snippet Generator
A complete, working light/dark toggle — CSS variables plus the JS to switch, remember the choice, and respect the visitor's system preference by default.
About this tool
Add the CSS to your stylesheet, put the one-line script in your page’s <head> and the toggle script just before </body>, then use <button data-theme-toggle> anywhere for a working toggle button. Defaults to the visitor's OS-level light/dark preference on first visit, then remembers their manual choice in localStorage after that.
The head script matters: if the saved theme were only applied at the end of the page, someone who chose dark mode would see a white flash on every page load. color-scheme makes the browser’s own form controls, scrollbars and default backgrounds match the theme, the button reports its state to screen readers with aria-pressed, and storage errors (such as in some private browsing modes) are caught so the toggle still works for the current page. Both colour pairs are checked against the WCAG AA contrast minimum as you type.