Dark/Light Mode Toggle

Theme component
,
119

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.
4 Likes
120

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

2 Likes
121

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

3 Likes
122

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

4 Likes
123

See screenshot:
image

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?

Thanks

124

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:

3 Likes
125

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

126

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

2 Likes
127

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!

1 Like
128

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!

129

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

3 Likes
131

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

2 Likes
132

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

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

4 Likes
133

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
134

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.

3 Likes
135

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’)

Backtrace:

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)
2 Likes
137

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

image
image1416×296 7.5 KB

2 Likes
138

It says up to date

image
image1103×1164 49.2 KB

2 Likes
139

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

1 Like
140

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

2 Likes