Dark/Light Mode Toggle

I love this component! :heart_eyes: But, I am having a little issue.

It looks like the component only works when the ā€œEnable automatic dark mode color schemeā€ option is enabled. My issue occurs when the option is enabled, and when the system preference is set to dark mode (i.e., preferred color scheme: dark).

In the scenario above, when I try to switch to a light theme vie Preferences > Interface > Theme, nothing happens, which is fine with me. Presumably, since my system preference is already set to dark mode, switching to light mode in Discourse does not override it.

When I do the same with the Dark / Light Mode Toggle component, and if my theme preference in Discourse is set to Light, the toggle actually lets me switch to light mode (which is even better in my view) but the site logo on the header remains in dark mode and hard to see in light mode. When I look in the inspector, I see the element looks like this:

<div class="title"><a href="/" data-auto-route="true"><picture><source srcset="<link to image>" media="(prefers-color-scheme: dark)"><img src="<link to image>" id="site-logo" class="logo-big"></picture></a></div>

I noticed the media="(prefers-color-scheme: dark)" part although we are now in light mode set by the toggle.

I should add that the site logo ordinarily switches fine between light and dark mode when the ā€œEnable automatic dark mode color schemeā€ option in Discourse is unchecked. But, this prevents the Dark / Light Mode Toggle from being displayed :man_shrugging:t2:

Also, if my theme preference in Discourse is set to Dark from Preferences > Interface > Theme, and my system preference is also dark, the toggle does not switch between light and darkā€”it always remains on the dark theme.

Ideally, I would prefer the Dark / Light Mode Toggle component to work the way it does now, but to make the site logo in the header follow the currently-active light/dark setting, not the userā€™s system preferred color scheme.

1 Like