Dark/Light Mode Toggle

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!


@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.


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.


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.


But when my browser uses a dark theme,

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


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.


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


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:

There is a PR for a refactor in the works.

Thanks to @pmusaraj for some amazing updates & refactor to this component. His refactor solved all of the issues that arise when system is set to dark mode & users want to switch their forum UI to light mode.

We have defaulted to not have the toggle be shown in the header menu. This will show it in the footer of Discourse’s new sidebar.

If you want to display in the header, you can choose to show it in the header menu via theme settings.


After updating, the toggles from the “old” menu are completely gone. We are not using the new sidebar yet. And our header bar is already full of multiple other icons so we don’t want to add it there.

Any way to add it back to the bottom of the old menu?

Sorry, there is not as we are now focused on the new user menu & sidebar as the previous hamburger menu will eventually be deprecated.

That being said, you don’t need to enable the docked sidebar to use this feature, but you will need to enable the experimental hamburger menu like so.



This theme component breaks on stable, maybe some .discourse-compatibility info could be added to it to prevent that?

Just making sure, but have you updated the component to the latest PR?

Yes, I did. It breaks when I install the component on a pristine forum on stable.

1 Like

This component is only compatible with tests-passed branch.