FIX: Refactor & adjustments for better functionality

[jordanvidrine]

When users who had their system set to dark mode used the toggle light scheme, the logo would remain as a dark-mode logo. This has now been fixed.

I made the toggle appearing in the header the default in addition to appearing in the hamburger menu. I also changed the setting wording to "remove" the toggle from the header should an admin decide to do so.

[CvX]

What's that for? Is it used (read) in this theme component? 🤔

[jordanvidrine]

So I found that if your system is set to dark mode, and you click toggle light color scheme the logo would not change. Adding these Session.currentProp methods fixed this. Here is where it is used in core.

https://github.com/discourse/discourse/blob/38bb00edce0764d3e0c4700115622af446c84db5/app/assets/javascripts/discourse/app/widgets/home-logo.js#L37

The only draw back is now, when changing your system from either dark to light, and this component is set to auto, the page needs a refresh to load the correct logo. I feel the middle ground I've come to is fine for this component.

I also contemplated turning off the auto select.

[pmusaraj]

I pulled this locally @jordanvidrine and the original issue here seems to be due to these lines:

https://github.com/discourse/discourse-color-scheme-toggle/blob/main/javascripts/discourse/initializers/dark-light-toggle-hamburger.js#L94-L98

      if (window?.matchMedia("(prefers-color-scheme: dark)").matches) {
        Session.currentProp("defaultColorSchemeIsDark", true);
      } else {
        Session.currentProp("defaultColorSchemeIsDark", false);
      }

When this component sets defaultColorSchemeIsDark the core home-logo component assumes that the only available logo is the dark mode one. Generally speaking, I don't think this component should set that session property, because in core it is inherited from the backend and it is there just to indicate whether the default color scheme is dark (core needs to know that so it doesn't load a second dark mode stylesheet).

Instead, I think the component can directly manipulate the media property of the two color definition stylesheets:

When cookie is set to light, set light scheme stylesheet to media="all", dark scheme stylesheet to media="none" (not sure if syntax is correct for the latter).
When cookie is set to dark, do the opposite. And when auto is selected, reset to core defaults (like in screenshot above).