Dark/Light Mode Toggle

Here is the video:

My main issue is that on my forum, I don’t even see these options in hamburger menu:
image

You do not have the console tab open in your screen cast, so it is hard to see if any errors are taking place.

Have you made sure to follow each step in the original post on this topic?

at least 2 color scheme choices need to be enabled in your /admin/customize/colors area
A dark theme needs to be enabled at: /admin/site_settings/category/basic?filter=dark

And do you, as a user, have two color schemes selected, one for light, and one for dark, in your user preferences?

1 Like

Hello,

Yes this was correctly executed. Today everything is showing correctly. This was due to cookies. It was odd that on other browsers (where I never visited the forum) it was showing missing as well. Now everything is correct. Thank you and sorry for the confusion I’ve caused.

Only thing is, all users including guests can see the toggle on header. But as an admin when I am logged-in, I cannot see the toggles. Is this intentional? Could this be server cache or something?

1 Like

Hmm that’s interesting. Do you have a dark and light color scheme selected in your user preferences?

And are you using the theme that has the component installed?

2 Likes

I had to go to my profile and enable this option (Enable automatic dark mode color scheme) so it can appear on header. probably I was fidgeting around and missed that checkbox.

2 Likes

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

Same here! Did you find a solution?

I’m no frontend developer but I did some debugging:
When in dark mode, like my computer is set to, the HTML for the logo looks like this:

And the logo looks fine, with dark mode fully working. When toggling to light mode, the theme goes light but the logo disappears (dark logo remains).

This is what the HTML looks like:

There is an additional line, <source srcset="https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png" media="(prefers-color-scheme: dark)"> which ā€œblocksā€ the correct logo from loading. If I remove that line with Inspect Element, and only leave <img src="https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png" alt="RadixTalk" id="site-logo" class="logo-small" width="36">, the correct logo shows up.

I hope this info was useful.

1 Like

I’m afraid not. I ended up changing the header background color in a way that switching the logo between light and dark mode no longer mattered :man_shrugging:t2:

Bumped into the same problem, hoping for a fix soon. Switching dark/light with my local device setting works fine and shows the correct light-logo.

EDIT: I noticed this bug only happens, when the actual device setting is set to dark, if the current device setting is light everything works as expected. Hope this helps.

1 Like

Has anyone been able to look into this issue? I tried but this is a little too complicated for me at this point… :stuck_out_tongue:

1 Like

Due to a refactor & implementation of how dark mode & light mode now work in core, this issue has arisen. It will take a good refactor of the code to get it working properly.

Sorry about this!

2 Likes

@jordan-vidrine - Any updates?
For some reason my toggle has stopped working all together. Not sure if it’s update related or something I’ve done.
Will keep troubleshooting though!

Figured it out!
I mangled my dark mode id and had to set user preferences to match the default on the theme.
That go everything straightened out.
Thank you for the great toggle! :purple_heart:

If I am understanding this correctly, the component is designed to swap between two color schemes for a single theme rather than allowing for the selection of a theme itself?

Thats exactly it.

One theme , two colour variants.

Update:

Unfortunately, due to upcoming changes to Discourse Core, this component will no longer be supported. We will work on refactoring the component to eventually be usable in the new Discourse Core user menu, but for now I will mark this component as broken because of the issues that arise when switching from a dark → light color scheme.

7 Likes

Hi
This is a really great component,But I’m having a bit of a problem and I don’t know how to fix it.

This toggle tool is great when my browser is using a light color theme.

forum002

But when my browser uses a dark theme,

As you can see, the logo can not automatically switch between dark and light colors.

forum001

Hello and welcome @ansen_an :slightly_smiling_face:

I’m afraid that’s an issue with this theme component at the moment, which is why it’s currently tagged as #broken.

3 Likes

Hi, @JammyDodger
Thank you for your reply and look forward to it being fixed :grin:

3 Likes

Has anyone found a workaround for this issue? We are still using it on live since it’s just a cosmetic issue. And having such a simple dark theme switch overweights the flaw, but still would be nice to fix it :slight_smile: