Automatic Dark Mode color scheme switching

You can now set up your Discourse site to automatically switch color schemes when the user’s device is in dark mode. For a quick preview, head over to the try.discourse.org instance and toggle your device’s dark mode on and off to see this new feature in action. (This feature not yet enabled on meta.)

:warning: This brand new feature relies on changes to how themes and color schemes interact. If your site uses a custom theme or unofficial plugins, it is most likely not compatible with automatic dark mode yet.

Enabling automatic dark mode

To enable this feature on your instance, you can pick the dark mode color scheme in your site settings:

Once that setting is set, you can reload your site with a device in dark mode and you should see the dark color scheme in use.

If the logo that worked well on a light scheme doesn’t work as well on a dark background, you can now upload alternatives in the new settings available in core.

The files uploaded in these settings will replace the regular setting with the same name if a) automatic dark mode switching is enabled and the user’s device is in dark mode or b) the user is using a dark theme (even if not in dark mode). Sites that were previously using Alternative logos for dark / light themes can now switch to using the core site settings and remove that component.

Some users might not want to automatically switch to a dark color scheme when their browser is in dark mode. They can disable this feature by unchecking the “Enable automatic dark mode color scheme” option in their Preferences > Interface screen:


See also Updating themes and plugins to support automatic dark mode

31 Likes

That’s freakishly cool.

Thanks!
Ray

5 Likes

Just a word of warning, this update takes a much longer time to apply than normal. Be ready for that.

4 Likes

This is epic. The only thing missing is a tiny lights off/on button to switch back to light mode manually. In my case I use dark mode system wide even during the day

7 Likes

Hello,

Can i have a feature request for dark mode? This is such an epic feature but that would be much more cooler than can change theme specific dark color schemes just like this :point_down:

Theme 1 - Color Scheme 1 = Dark Color Scheme 1
Theme 2 - Color Scheme 2 = Dark Color Scheme 2

Edit: That would also be nice if the dark mode will be theme restricted. So only activate for example Theme 1 and only appears dark mode option in profile setting if user use the Theme 1.

Is that possible to make this way @pmusaraj ? :slight_smile:

Thank for this awesome feature! I am waiting this kind of solution long long time! :clap: :heart:

4 Likes

The next item I am working on for this feature is a color scheme picker in the user profile. Site managers can mark color schemes as selectable by users, and then users can switch to the color scheme of their choice in their profile. The plan is to allow them to choose a regular color scheme, and a dark mode color scheme (or disable dark mode color scheme switching).

At the moment, I don’t plan on adding theme-specific dark color schemes.

9 Likes

This is a fantastic addition, thanks for integrating it!

With (automatic) color scheme switching available, I’m wondering if there might also be some way to switch back and forth between light and dark Discourse modes when embedded as comments in a blog. Specifically, my Ghost blog has a toggle that users can click on to manually switch back and forth between light and dark modes. I know that my blog’s CSS can’t effect the CSS within Discourse’s iframe, but with this new addition might there be another way that the toggle could also switch the Discourse color scheme? You can see an example post with comments at the bottom of this post.

3 Likes

This is potentially doable but a little tricky. At the moment, we haven’t added dark mode auto switching to the embedded comments endpoint. We can add that, and it would work if your Ghost site was auto-switching to dark mode when the browser switches to dark mode. But from what I can tell, your Ghost site uses a dark mode button, which won’t work with the Discourse implementation.

What you can do in your specific case, is toggle a class in the Discourse embedded comments iframe when clicking the button, and then use that class to toggle colors in your embedded stylesheet.

7 Likes

This is really great to discover, and as a new user setting up Discourse for the first time, I’m happy to see that it was just so recently implemented.

Looking forward to your planned light mode/dark mode color scheme picker.

That feature is already in core, I got distracted by other work and forgot to announce it.

To use it, you need to create multiple color schemes in your site, and mark them as selectable by users:

Once that is done, users should see two dropdowns in the Preferences > Interface page:

5 Likes

That’s great news, thank you! However, I’m on 2.6.0.beta2 and I only see one dropdown:

Is there something I need to do to enable the second dropdown?

Also, would it be possible for “Default” to render in the same way as the default option does in your screenshot—referencing the color scheme name? So that under “Regular”, it would say for example “White Amber (site default)”?

1 Like

Yes, you need to mark at least one dark color scheme as selectable by users.

Yes, good suggestion, I’ll look into adjusting that label shortly.

4 Likes

I have the Discourse default Dark color scheme selectable for users, and specified in settings as the default dark mode color scheme, but no “Dark mode” drop down appears in Preferences > Interface.

Sweet, thanks!

We don’t show a dropdown if there is only one dark scheme available and it is set as the automatic dark mode scheme by the site admins (the checkbox in your screenshot lets user disable/enable that option). To see that second dropdown you need to either a) add a second dark color scheme or b) set default dark mode color scheme id to none in the site settings.

5 Likes

Ok, I see the dropdown when I set default dark theme to “None”.

And it looks like Discourse checks whether the theme qualifies as dark based on the lightness of the $secondary color. Dropdown appears when $secondary is suitably dark. Nifty!

4 Likes

I think this is my last question about this:

Can I define both light and dark color schemes in about.json? I get an error 422 when I try a second item within color_schemes, but I thought I’d ask.

Edit: Never mind, defining two color schemes in about.json works perfectly. The Discourse CLI just needed to be re-run.

Sounds good. While I am currently putting together several dark mode utilizing (Ghost) themes for colleagues of mine, all of which will share a single Discourse instance, that’s still a bit further down the road.

I unfortunately don’t quite understand what you’re suggesting here. Currently, any elements that I want to utilize dark mode styling within my blog have their CSS doubled up by preceding such items with body.dark. As in

p {
    color: #000;
}
body.dark p {
    color: #FFF;
}

Might you be suggesting that I use that body.dark code to change things in the Discourse iframe? Because I tried inserting the following into Discourse’s Embedded CSS field, which unfortunately had no effect:

.FF2F-discourse p {
    color: #000;
}
body.dark .FF2F-discourse p {
    color: #FFF;
}

That being so, are you instead suggesting that I have some separate JS written so that the toggle will affect a separate change via specific targeting of a class in the iframe? Because like I stated in my previous comment, I didn’t think that external coding could affect CSS within an iframe, hence my confusion. But I’m very much solely an HTML/CSS amateur, so there’s no doubt that you know better than me and/or that I’m misunderstanding something else.

Thanks again for any hints.

1 Like

Yes, that’s what I am suggesting. Your blog’s stylesheets cannot apply to the iframe, but you can use JS to toggle the dark class in the iframe’s html or body element, and then update your Discourse embedded stylesheet accordingly.

3 Likes

I’ve found two pages explaining how toggling between light and dark modes for Discourse’s embed might be done, but the guy who writes my JS is wondering if the method you’re suggesting entails using postMessage (which the pages I found state) or something else.

Here’s a page explaining how to implement cross-window messaging with postMessage

While this one is actually a tutorial on how to change the CSS within an iframe via postMessage, specifically for switching between light and dark modes:

Might I be on the right track with all this?

1 Like