Creator tools / LIVE LAB
Back to SnippetsThree-state theme switcher with pressed-state feedback
A token-driven theme control with semantic buttons, aria-pressed state, visible confirmation, and no framework or storage dependency.
HTMLCSSJavaScript
Receipt: one token surface, three named states, no hidden persistence.
What this is
Light, dark, and high contrast—with the choice exposed to everyone.
Use this when visitors need a direct display choice beyond their operating-system preference.
The example deliberately avoids silent persistence so its data behavior stays obvious.
Use it
- Apply the data-theme attribute to the smallest container that owns the token set.
- Test every state at normal text, zoom, forced colors, and with keyboard focus.
Make it yours
- Replace the surface, text, muted, and signal tokens for your own palette.
- Add reviewed local persistence only after defining consent and fallback behavior.
Reuse contract
Supported environments
- Current browsers with CSS custom properties and color-mix
Security notes
- This demo stores no preference and makes no network request.
- Run actual contrast checks for every token combination; a high-contrast label is not proof by itself.
Loading the isolated live lab…