EN

Themes with CSS custom properties — that's it

Design FrontEnd

#Català #css #css3 #design #Design Systems Architecture #design-systems #FrontEnd

Themes with CSS custom properties — that's it

The modern standard way to theme the web is with CSS custom properties (CSS variables). No Sass needed, no JavaScript needed, no runtime needed. That's all xarop.com does to have six flavors.

The basic idea

:root {
  --accent-color: #ff0000;
}

:root[data-flavor="mint"] {
  --accent-color: #00a878;
}

a { color: var(--accent-color); }

Changing data-flavor to <html> instantly changes all references. No reloading, no JavaScript repaint.

Automatic Light / Dark

:root {
  --bg: white;
  --text: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --text: #eee;
  }
}

Respect system preferences. Users already have an opinion; there is no need to impose ours on them.

Manual override

:root[data-theme="dark"] {
  --bg: #111;
  --text: #eee;
}

With data-theme="dark" we force the mode. A three-line JavaScript <button> can change the attribute. Optional — the web works without.

accent-color and color-scheme

Two modern properties that we rarely use:

:root {
  accent-color: var(--accent-color);
  color scheme: light dark;
}

accent-color colors checkboxes, radios and some native controls. color-scheme tells the browser which UI colors (scrollbar, form controls) to use.

Combine theme + flavor

:root[data-theme="dark"][data-flavor="mint"] {
  --accent-color: #00a878;
  --bg: #111;
}

Attribute selectors can be combined. Cartesian can grow but generally flavor only touches --color-accent and variants, while theme touches background/text. They remain orthogonal.

Conclusion

CSS custom properties are powerful. In 90% of cases "theme system" is all you need. JavaScript for persistence (localStorage) is optional — a progressive enhancement.