Dark Mode Toggle — Instructions

A one-button light/dark switch built on CSS variables. It follows the visitor’s system preference on the first visit, remembers their choice after that, and transitions smoothly.

1 · Preview it

Double-click snippet.html to see it working in your browser. It’s plain HTML, CSS & JavaScript — no install, build, or server needed, and no external libraries.

2 · Add it to your site with Claude

Keep this folder inside your website project (or anywhere Claude Code can read it), then ask Claude something like:

“Add the dark-mode toggle from snippet.html in this folder, and switch my site's colors to the CSS variables it uses.”

“Use this dark-mode toggle and make sure the choice is remembered across all my pages.”

Prefer to paste it yourself? Open snippet.html, copy the part you need, and tell Claude: “integrate this into [page], matching my site’s existing styles.”

Tip: point Claude at the file by name — e.g. “use the code in snippet.html from the Dark-Mode-Toggle folder” — so it references the exact snippet.

3 · Customize

Theme colors live in the :root and [data-theme="dark"] variables — point your styles at them (var(--bg), var(--text)…).
First visit follows the OS setting; the choice is saved under the localStorage key theme.
Swap the moon / sun glyphs in the button for your own icons.

Good to know

No dependencies: works in any site — static HTML, WordPress, React, anything.
Responsive & accessible: built to behave on phones and with keyboards.
Yours to change: tweak the colors and text, or ask Claude to restyle it to your brand.

Prepared by Inner Web SolutionsBuilt with Claude