A few ways of specifying per-theme colours in only CSS
The article discusses various methods for specifying per-theme colors using only CSS. It highlights techniques such as using color palette variables and the light-dark() function. The author shares personal insights on the challenges and considerations when implementing these methods.
- ▪The article outlines several techniques for managing theme colors in CSS without JavaScript.
- ▪It emphasizes the importance of supporting automatic theme selection based on user preferences.
- ▪The author reflects on their own experiences and requirements while developing their website's theme functionality.
Lobsters files mainly under programming. We currently carry 173 of its stories.
Opening excerpt (first ~120 words) tap to expand
A few ways of specifying per-theme colours in only CSS 🗓️ 2026-05-16 (last updated 2026-05-20) • Tagged /css, /meta=also Table of contents: The assumed basic HTML and CSS Write it all out the hard way (doesn’t scale very well) Lots of colour palette variables (what normal people do) The space toggle hack (poor man’s if()) color-mix() with one variable per theme (I settled on this for this site, but I’m weird) light-dark() (consider using this these days, instead of or combined with palette variables) if() (maybe some time soon) Paused @keyframes animation (probably a bad idea) Summary (a comparison table) Bonus 1. Parametric colours Bonus 2. @function and @mixin I was thinking about this as part of putting this website together.
…
Excerpt limited to ~120 words for fair-use compliance. The full article is at Chrismorgan.
Discussion
0 commentsMore from Chrismorgan
