Theming is not consistent across different Cohost theme settings

[ApexDevelopment]

Cohost has dark mode, light mode, and an option to follow your system's theme. All three options apply different changes to the DOM. This makes it very difficult to write a theming engine that works regardless of what setting the user chose. There are three options:

1. Wrangle all elements and delete the attributes/classes that cause colors to be applied, replacing them with custom ones. This thrashes the DOM and would be laggy, but allows for the easiest theming experience for the user.
2. Allow the user to directly edit all CSS variables. This gives the best customizability and probably would be easiest to implement, but not all of Cohost's colors are stored in variables, and there are so many variables that it would be overwhelming for the user.
3. Detect what base Cohost theme the user has selected, then, depending on this, apply different stylesheets and modifications to the DOM. This would probably have about the same performance as the current solution, but would introduce lots of code duplication.

I'm thinking option 1 or option 3 are probably best, but I'm dreading implementing any of the above.

[ApexDevelopment]

If the user has "follow system theme" selected, window.matchMedia("(prefers-color-scheme: dark)") and window.matchMedia("(prefers-color-scheme: light)") would allow detecting which theme to apply. But to even detect what theme the user selected, we probably either have to query the Cohost API or scan the document for elements with the data-theme attribute.