Skip to content

A DRY Approach to Color Themes in CSS


Back to Blog

I wrote an article on CSS-Tricks about using a --var: ; trick from Lea Verou to define theme variables only once, when you need to respect a user-preference media query as well as CSS classes. Since you can't do both in a single declaration block, you usually repeat these theme variables… but with this little hack, no need!

--color: var(--light, orchid) var(--dark, rebeccapurple);

The article details the trick and how to set it up (because it does look weird at first glance), maybe you'll find another use case for it!

Read the full article on CSS-Tricks