Dark Mode Toggle

A theme switch that remembers your choice — the feature every site wants.

Add a light/dark switch that respects the visitor's system setting and remembers what they picked. The trick is CSS variables plus one attribute on the page — you'll see how real theming works.

What's inside

• Toggle light and dark with CSS variables
• Remembers the choice in localStorage
• Falls back to the OS preference on first visit
• One data-attribute drives the whole palette
• No flash of the wrong theme

Quickstart

$ git clone https://github.com/devai-io/devai_boilerplates.git$ cd devai_boilerplates/dark-mode-toggle$ open index.html   # or just double-click the file

Browse the code

The full source, exactly as it ships in the repo.