Dark/Light Mode Toggle

Theme component
,
141

Hmm, I cant seem to get this to happen. :cry: Sorry about that

2 Likes
142

Hello, can you merge translations Add Arabic translation by jermanuts ¡ Pull Request #37 ¡ discourse/discourse-color-scheme-toggle ¡ GitHub

Thanks for making it :heart:

4 Likes
143

Hi. Is there a reason that the dark mode doesn’t stick when I refresh the page in my Chromium-based browser (not using Google Chrome) on my PC and a lot of times just does nothing when I click on it?
It’s all setup correctly, but no idea why it won’t stick or toggle at all a lot of the times.

1 Like
144

For some reason on my instance the button is not showing in the most left bottom corner:

image

vs Meta:
image

I have been trying this on a default theme with only this compoonent enabled, and no other custom CSS, am I missing something here?

Even in safe mode, with all plugins disabled and just the default theme + this component, the toggle button is not in the same place.

1 Like
145

On another note, I see this issue happening on Meta, noticed this on my instance for a while now but figured it was just me)

This happens when the scheme is changed manually, and does not match the system scheme (as far as I can tell) - a refresh fixes it, but randomly the logo will revert to the “system” color ignoring the manually changed mode through the button.

image
image1152×300 23.8 KB

2 Likes
146

seems a bug when chrome in dark mode ?
(saw discussed above)

how to reproduce:

  • discourse 3.2.1
    personal preference > color scheme: regular is a light theme, dark mode: same as regular

  • chrome uses system theme (system auto switch to dark in the evening)
    in the evening, when system switches to dark mode, chrome in dark mode too,

the switcher button does not work in the evening for the case above.
while, it works well in day time,
saw the discussion above, saying due to the preference sets dark mode to “same as regular”,
but why it could switch to dark mode in the day time ?

1 Like
147

When entering another board after a toggle, the site logo temporarily doesn’t change to match the toggled mode

1 Like
148

Hi @eveyone can someone help me in how to add the toggle
i’m using this guide i’m not able to see the togle i already installed on my Theme so but that toggle is not showing anywhere no in header or footer?

image
image1024×713 62.3 KB

1 Like
149

Did you follow the instructions in the first post? Do you have 2 color schemes that can be choosen by users and did you configure a default dark color scheme?

3 Likes
151

I finally managed to fix this issue after hours of debugging. Deleting and installing Sidebar Theme Toggle solved it!

2 Likes
152

Might be helping someone out there, to avoid all your users to have to meddle with Interface settings I find that having the light mode default actually solve the toggle doing nothing (as well as for non logged in users).

image

2 Likes
153

4 posts were split to a new topic: Wrong logo appears in some cases when toggling dark/light mode

155

A post was split to a new topic: Problem with brand logo and automatic dark mode scheme

156

2 posts were split to a new topic: Dark mode selector background colors

157

I’m sure that when i set my default scheme being dark mode this component doesn’t working

There something can I do to keep my dark mode as default and allow my users switch to light mode fi them want?

1 Like
158

Putting default to light and dark to dark, and after that users get what they are using in their devices as should? If an user uses light, that user is expecting to see light, not dark. And same thing with dark, of course. It is always good policy to respect user’s choises :smirk:

2 Likes
159

But my default template must be dark mode my colours are and should dark and I won’t change this to “respect my users” my template should be a style how I Imagine and just want offer light mode as a adicional option.

If this its not possible, its alright :smiley:

160

So basically you want to break user’s settings because of what you want? I don’t totally get the reason for that, because you have light palette too. And if your theme can’t use it the issue is your design, not how Discourse handles light and dark mode, or if an user has different taste than you have.

Or did I misunderstand something :thinking:

Quite many things can be done in Discourse. But I’m quite sure that overdriving user’s settings in a device and still leaving option to overdrive what you as an admin and designer wants, would find out of the box.

I’m sure someone who knows better will chime in.

My point is that don’t do that. It is just bad desing and bad user experience.

2 Likes
161

Exatly!

My doubt it’s about some way to change to light mode awhile my template/style is dark

But let me tell ya to nevermind about it I’ll gonna try other way.

1 Like
162

I can change the background image in my theme by adding to the CSS

image
image616×434 18.8 KB

is there a css selector I can use to have a different image for dark mode?
I have tried

body .dark {
    background-image: url('https://www.myracedata.com/images/sebring.jpg');
    background-repeat: repeat-y;
    background-size: 100%;
}

I have dug thru the git repository for the component
Sorry I’m new here
Andy