Dark/Light Mode Toggle

Greetings dear Discourse team and forum participants :raising_hand_man:

I recently noticed that quick link to open the editor for a personal message is not compatible with the theme component Dark/Ligt Mode Toggle if I am using a smartphone with the Android operating system installed . To be more precise, when you click on the link, the message composer opens in a certain fraction of a second and collapses back into a draft. I checked all the theme components and plugins and found that the composer behaves this way only with the Dark/Ligt Mode Toggle component enabled on Android. Here’s a video:

In the video I showed 2 scenarios.

  1. When you first click on the link, the composer quickly opens and at the same moment collapses.
  2. When you click on the link again, the composer opens from the saved draft and after deleting the previous draft, the composer opens in normal mode.

Hi, can you help me how an admin implement this site wide? thank you

1 Like

Thanks for reporting this, a pretty odd and interesting bug!


Thanks a lot for this component :pray: :slightly_smiling_face:
Just installed it and it works pretty good on desktop and Android.


See screenshot:

So, are you saying the toggle setting adds no toggle setting option on the frontend and that I need to install this plugin, yes?

If “no”, where do I find the toggle switch now that I enabled dark-light toggle per above screenshot?


That’s right. Once you include this theme component to your theme, save and refresh the page – and you should see the icon to toggle the dark/light mode. :slight_smile:

1 Like

So it seems it’s already installed. I tried to install just now, and it said already installed. Which you can see in my previous screenshot.

But then there is still no toggle option:

Maybe you have no dark theme defined that can be toggled?
In case, see above at Dark/Light Mode Toggle.

1 Like

I have to have a seperate “theme”? I’m using the default theme. I can toggle to dark mode like this

However the toggle only icon ONLY shows if I select “Dark” in preferences. I would like even first time visitors to see the moon icon bottom left. Possible?

Edit: solved as per the end of this post. It was all ME!

Hello, I’m looking to set the Dark theme as the default on my Discourse forum. However, I also want to give users the option to switch to the Light theme if they prefer.

My question is: How can I ensure that the forum’s color scheme doesn’t automatically change based on the user’s system settings? I want it to stay on the Dark theme by default and only change to Light when a user manually selects it. Any guidance on setting this up would be greatly appreciated.
Thank you!

I was hoping that with the latest Discourse updates this error would go away, but it still persists

1 Like

When setting everything up, if I have the light mode turned on, whenever I refresh the page, dark mode is always showing. Every single refresh, how can I stop this? @jordan-vidrine

1 Like

Would you mind letting me know all the steps you have to your setup?

Is your operating system set to auto, dark, or light?


Hi, is it possible to have a third toggle? Similar to how twitter has light, dim, dark?

If yes how would I go about adding it in?

1 Like

We do not have a third toggle. To add this in would require a PR to the theme component linked in the OP of this topic.


After upgrading discourse to 3.2.0 I’m seeing these errors in the logs

Dark-Light Toggle theme/component is throwing errors:
TypeError: Cannot read properties of null (reading ‘en’)


TypeError: Cannot read properties of null (reading 'en')
    at Object.initialize (https://site.com/theme-javascripts/56ff324506efb7c3883ba59ee00cc753852ee8cc.js?__ws=site.com:5:51)
    at n.initialize (https://site.com/assets/chunk.6d10396b901f5b95b67e.d41d8cd9.js:2:309459)
    at https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:141483
    at e.each (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:368590)
    at e.walk (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:367606)
    at e.each (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:366959)
    at e.topsort (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:367005)
    at e._runInitializer (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:141795)
    at e.runInitializers (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:141441)
    at e._bootSync (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:110927)
    at e.domReady (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:110503)
    at invoke (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:358129)
    at h.flush (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:357216)
    at p.flush (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:358979)
    at B._end (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:364062)
    at B._boundAutorunEnd (https://site.com/assets/vendor.f196a698a6a811ae0583c1ea5284644b-53642a3b547b78e34800ab2eeb101f12b39be8c27ec85e9ad359a095161fad6b.js:11:360486)
1 Like

What is this setting in the theme component set to? Also, is the theme component up to date?

1 Like

It says up to date

1 Like

what are the steps to reproduce this error? does anything happen on your screen? only in the console?

I’m not any visual issues with the operation. So far just the logs in the console.

1 Like