A few ways of specifying per-theme colours in only CSS

3 days ago

CSS supports multiple techniques for theme-based color specification: manual coding, CSS variables, color-mix(), light-dark() function, if() function, and paused @keyframes animations.
Key requirements include supporting auto (via prefers-color-scheme), light, and dark modes via radio buttons without JavaScript, with assumptions of HTML structure and CSS features like @media and :has().
Manual approach is verbose but compatible; variables (since 2014-2017) separate definitions and use; color-mix() (since 2023-05) allows interpolation; light-dark() (since 2024-05) is compact but limited to light/dark.
if() is Chromium-only; @keyframes (since 2020-01) offers flexibility but complexity.
Each method varies in compatibility, verbosity, maintainability, theme support, and interpolation capabilities, with trade-offs for different use cases.

Hasty Briefsbeta