[underwater]

We have a design system that supports both black text on white and white text on black (as a contrasting block of content).

If we want to support dark mode now we have to support four different options. Writing that with a combination of classes and media queries is going to be a nightmare:

   .default-theme h2 { background: white; color: black }
   .inverted-theme h2 { background: black; color: white }

   @media (prefers-color-scheme: dark) {
     .default-theme h2 { background: black; color: white }
     .inverted-theme h2 { background: white; color: black }
   }

Your trick might make this a little more palatable.