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!