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!

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?

1 Like

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.

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

4 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:

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.

6 Likes

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.

admin/site_settings/category/all_results?filter=sidebar

2 Likes

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.

2 Likes

This component is only compatible with tests-passed branch.