Is your enhancement request related to a problem? Please describe.

With the way theming is currently done in the CSS style logic has to be duplicated around four times in different parts of the stylesheet.

This is a maintaince and development nightmare.

Describe the solution you'd like

A better way of theming that doesn't require such a duplication.

The best way to go about it would be to probably use a CSS pre-processor as then we won't have to use any of the new CSS features and can continue to support old browsers.

Describe alternatives you've considered

Alternatively if we were to use new CSS features like variables we could implement something akin to this

https://css-tricks.com/a-dry-approach-to-color-themes-in-css/

Though this solution breaks the darkreader extension

Additional context