Automatic Dark Mode color scheme switching

This feature is so useful, thank you for including in core.

I’ve done up a gif to demonstrate it on Windows. Discourse switches instantly, faster than the OS itself :+1:

Additional details here on my instance if keen.

7 Likes

:clap: Now I can read twice as much. :laughing:

6 Likes

Please set this default to on. There is no user that wants to use dark mode and find a light theme when opening discourse website. There really is no point in having this default off.

6 Likes

Yes @pmusaraj is there anything preventing this from working by default in a new Discourse install?

5 Likes

Yes, we can enable this by default for new installs. The default sketch logo we ship looks great on dark mode as it is. The main issue IMO is that we need to allow admins to manage their dark mode color scheme (or disable it) in the wizard. I believe we need to make some changes to this screen:

I can start working on this in the current release cycle.

10 Likes

This is now in core as of last week (pull request), new Discourse installations will have dark mode enabled by default.

7 Likes

That’s great news! Thank you so much! You’re awesome!

2 Likes

this only seems to be working with logged-in users for me

logged out users should be defaulted on light mode when system is on light mode but instead are defaulted on dark mode and doesn’t switch to light mode when toggled on/off

4 Likes

Hmm can you repro the above @pmusaraj ?

3 Likes

I cannot reproduce this report. Tested on a new self-hosted site, skipped the wizard, and the default color scheme is Light, and the scheme flips to dark when I switch my device to dark mode.

Maybe you made changes to the default color scheme in the wizard? What do you see under Color Palette when you go to Admin > Customize > Themes > Default?

1 Like

this is what I see

1 Like

even though my default theme is light when you visit the site (logged out system on light mode) it appears dark mode

1 Like

Is your browser set to dark theme?

1 Like

Can you provide the URL to the site so I can test it as an anonymous user?

1 Like

No, as it works on light when logged in and when logged out goes to dark same browser

Sure the link is LGBTChat - A safe space for LGBTQ+ people! (lgbtchatmc.com)

3 Likes

That is very strange, the base color definitions on your site are returning the dark colors, which is strange because the base color scheme is harcoded as the light one.

You can try rebuilding, and if that doesn’t work, try creating a new Light color scheme and use that in your theme.

6 Likes

After running a rebuild, this now works as expected! Thank you for your help @pmusaraj :blue_heart:

4 Likes

Hi there, thanks for an awesome addition of auto dark mode for the latest discourse install… kudos to the maintainers :clap:t2:

However, I did notice that in Safari mobile browser running on latest iOS 15 (of my iPhone 12) , the notch area still stays light / white… (at meta.discourse.org the selected Dark theme does cover the notch as well, but I suspect that is a different implementation than the auto dark theme right?)

Good news is that it works fully on Chrome mobile browser in iOS 15 though…

Safari - notch area is still light example at try.discourse.org

Chrome - notch area is dark :white_check_mark::

Safari - notch area is dark at meta.discourse.org when choosing “Dark” mode:

cc @pmusaraj

Thanks!

4 Likes

Anyway we can set it enable by default for installed site? Would re run the install wizard work?

1 Like

For an existing site, you can look for the site setting mentioned in the OP, default dark mode color scheme id and pick a color scheme there.

6 Likes