Back to particles
Design Beginner March 20, 2026

Particle: CSS Variables for Theming

A quick tip on using CSS variables for dark mode.

Difficulty

Beginner

Reading time

1 min read

Updated

March 20, 2026

cssthemingdesign

Code spotlight

css

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}
[data-theme="dark"] {
  --bg-color: #000000;
  --text-color: #ffffff;
}

Particle: CSS Variables for Theming

Using CSS variables at the root level allows for seamless theme switching without JavaScript overhead.

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}
[data-theme="dark"] {
  --bg-color: #000000;
  --text-color: #ffffff;
}