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!

CSS
--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!

View original post on CSS-Tricks