# Dark/Light Mode Toggle **URL:** https://meta.discourse.org/t/dark-light-mode-toggle/215585 **Category:** Theme component **Tags:** deprecated, dark-mode-toggle **Created:** [January 21, 2022, 6:50pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585 "2022-01-21T18:50:36Z") **Posts on this page:** 20 **Page:** 2
### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP) #### Post date: [June 24, 2022, 4:27am UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/33 "2022-06-24T04:27:56Z")
> [@agungor](#): > > 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 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. ---
### Author: ![MarcP](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/marcp/32/160184_2.png) [@MarcP](https://meta.discourse.org/u/MarcP) #### Post date: [July 13, 2022, 12:01am UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/34 "2022-07-13T00:01:49Z")
Has anyone been able to look into this issue? I tried but this is a little too complicated for me at this point.. šŸ˜› ---
### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine) #### Post date: [July 13, 2022, 1:13am UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/35 "2022-07-13T01:13:14Z")
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! ---
### Author: ![Tara\_Walton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tara_walton/32/244402_2.png) [@Tara\_Walton](https://meta.discourse.org/u/Tara_Walton) #### Post date: [September 8, 2022, 2:13pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/36 "2022-09-08T14:13:03Z")
@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! ---
### Author: ![Tara\_Walton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tara_walton/32/244402_2.png) [@Tara\_Walton](https://meta.discourse.org/u/Tara_Walton) #### Post date: [September 8, 2022, 7:51pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/37 "2022-09-08T19:51:26Z")
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! šŸ’œ ---
### Author: ![AdamAndrews](https://avatars.discourse-cdn.com/v4/letter/a/ee7513/32.png) [@AdamAndrews](https://meta.discourse.org/u/AdamAndrews) #### Post date: [September 8, 2022, 9:23pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/38 "2022-09-08T21:23:55Z")
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? ---
### Author: ![Andrew\_Bond](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_bond/32/271376_2.png) [@Andrew\_Bond](https://meta.discourse.org/u/Andrew_Bond) #### Post date: [September 9, 2022, 8:58am UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/39 "2022-09-09T08:58:58Z")
Thats exactly it. One theme , two colour variants. ---
### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine) #### Post date: [September 20, 2022, 7:59pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/40 "2022-09-20T19:59:52Z")
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. ---
### Author: ![ansen\_an](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ansen_an/32/211415_2.png) [@ansen\_an](https://meta.discourse.org/u/ansen_an) #### Post date: [November 12, 2022, 12:52pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/43 "2022-11-12T12:52:51Z")
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. ![image](https://global.discourse-cdn.com/meta/original/4X/0/3/e/03e7fa0a80250b5a1d0fe2ca09c183f0c9dc92e3.png) ![forum002](https://global.discourse-cdn.com/meta/original/4X/0/e/7/0e7252e8b62cee66f624b9217eabae4e7100cd72.gif) But when my browser uses a dark theme, ![image](https://global.discourse-cdn.com/meta/original/4X/7/f/6/7f683951c36a55361bd70e0b536367f55d16aa8b.png) As you can see, the logo can not automatically switch between dark and light colors. ![forum001](https://global.discourse-cdn.com/meta/original/4X/3/c/d/3cd8faf51f278edb4e30108452d49e1b8fc94051.gif) ---
### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger) #### Post date: [November 12, 2022, 1:18pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/44 "2022-11-12T13:18:57Z")
Hello and welcome @ansen_an šŸ™‚ Iā€™m afraid thatā€™s an issue with this theme component at the moment, which is why itā€™s currently tagged as #broken. ---
### Author: ![ansen\_an](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ansen_an/32/211415_2.png) [@ansen\_an](https://meta.discourse.org/u/ansen_an) #### Post date: [November 12, 2022, 1:23pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/45 "2022-11-12T13:23:56Z")
Hi, @JammyDodger Thank you for your reply and look forward to it being fixed šŸ˜ ---
### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong) #### Post date: [December 2, 2022, 10:29am UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/46 "2022-12-02T10:29:33Z")
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 šŸ™‚ ---
### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine) #### Post date: [December 2, 2022, 4:38pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/47 "2022-12-02T16:38:06Z")
There is a PR for a refactor in the works. ---
### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine) #### Post date: [December 2, 2022, 4:53pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/48 "2022-12-02T16:53:07Z")
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. ---
### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong) #### Post date: [December 2, 2022, 6:20pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/49 "2022-12-02T18:20:46Z")
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? ---
### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine) #### Post date: [December 2, 2022, 6:34pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/50 "2022-12-02T18:34:00Z")
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` ![image](https://global.discourse-cdn.com/meta/original/4X/c/0/c/c0c7042e7904433911bfbd8c2e172ee8759ff5bc.png) ---
### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ) #### Post date: [December 16, 2022, 11:17am UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/51 "2022-12-16T11:17:42Z")
This theme component breaks ~~on~~ stable, maybe some `.discourse-compatibility` info could be added to it to prevent that? ---
### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine) #### Post date: [December 16, 2022, 12:57pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/52 "2022-12-16T12:57:43Z")
Just making sure, but have you updated the component to the latest PR? ---
### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ) #### Post date: [December 16, 2022, 1:00pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/53 "2022-12-16T13:00:59Z")
Yes, I did. It breaks when I install the component on a pristine forum on stable. ---
### Author: ![jordan.vidrine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan.vidrine/32/515563_2.png) [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine) #### Post date: [December 16, 2022, 1:57pm UTC](https://meta.discourse.org/t/dark-light-mode-toggle/215585/54 "2022-12-16T13:57:19Z")
This component is only compatible with `tests-passed` branch. [Previous page](https://meta.discourse.org/t/dark-light-mode-toggle/215585.md?page=1) [Next page](https://meta.discourse.org/t/dark-light-mode-toggle/215585.md?page=3)