Consider refactoring theme logic to use a reactive effective theme value

[jrysana]

seems like guiTheme is actually doing double duty: one for the selection and one for the effective theme (ie having resolved auto to light, or dark, or black) - can actually hoist that up in to a reactive value at the store level. I might call them something like selectedTheme and effectiveTheme and then shorten the more commonly/widely used one (effectiveTheme) to just theme.

Originally posted by @brandonbloom in https://github.com/deref/exo/pull/241#discussion_r695929987

[jrysana]

This is a good idea, and opens an interesting question.

Currently we use a mix of theming: most of the CSS stuff uses actual media queries to determine the effective theme if auto is selected, but we need to manually check this separately for the Monaco editor.

If we could have a reactive central store of effective theme, perhaps I could actually get rid of the media queries in theme-generated.css and just apply body.light or body.black depending on the effective theme when auto is selected.

That way we at least know that the manual JS theme resolution and the CSS theme resolution use identical logic, AND the generated theme file will be smaller and less repetitive (one definition block per actual theme palette)

Originally posted by @jwmza in https://github.com/deref/exo/pull/241#discussion_r696039651