Theme Switcher with CSS Variables
Build a theme switcher that changes a card using CSS variables
About this Project
The goal of this project is to teach you how to organize a stylesheet around design tokens and use CSS state to swap those tokens.
Relevant Roadmaps
Skills You'll Practice
CSS
CSS Variables
Modern Selectors
Organization
Suggested Tech Stack
CSS
Topics
CSS
Requirements
- **Tokens at **`**:root**`: Define a small token layer (`--color-bg`, `--color-surface`, `--color-text`, `--color-accent`, `--radius-md`, etc.) at `:root`.
- **Theme variants**: Override the same token names for light, dark, and one custom theme. The card should reference tokens, not hardcoded colors.
- **Switch without JavaScript**: Use three radio inputs and labels for the theme options. Target the checked state with `:has` or the general sibling combinator.
- **Keep the markup the same**: The themes should change the look of the same preview card. Do not duplicate the card for each theme in your HTML.
- **Avoid hardcoded colors anywhere outside the token layer.**
- At least three themes must be defined.
- No JavaScript is allowed.
- The switcher controls must be visible and keyboard accessible.
- The same set of token names must be defined in every theme, so switching themes does not leave any token undefined.