←WebSprout logoWebSprout

Build a Theme Toggle

The 'flip a class on body, let CSS variables do the rest' pattern. Build a working light/dark toggle and watch the whole page change with one click.

Step 1 of 3

Theming with one class

Real apps with light/dark mode rarely change every colour by hand. Instead they:

  1. Define a palette using CSS custom properties (--bg, --text, etc.) at the top of the file.
  2. Define a second palette inside body.dark that overrides those variables.
  3. Style every element using the variables (color: var(--text)).
  4. Toggle the dark class on <body> from JavaScript.

The result: one click flips the whole interface, and your CSS does not have to know anything about JS state.

Think of it this way: It is like a cinema with two sets of lights — house lights and screen lights. You do not rewire each lamp; you flip one switch and the whole room shifts mood.
Learn more on MDN
MDN: classList.toggle()CSSMDN: CSS custom properties