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 per theme 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:


User Selected Color Scheme Picker

To use this feature, 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:

See also Updating themes and plugins to support automatic dark mode

41 Likes

When it lands on the Beta channel, I’ll be able to test. Technically, there’s no reason why it wouldn’t work, if ChromeOS (like Android, iOS, macOS, etc.) respects the prefer-color-scheme media query.

I just tried this out on a Chromebook in the beta channel. It kinda works, but it is unpolished. I could get it to force dark mode for all web content, including Discourse sites (I tested using try.discourse.org). But it doesn’t look like it can toggle the web content when toggling the OS between dark and light themes. And playing around with it, I ended up quite often in a hybrid state, where parts of the UI are using light mode and other parts dark mode.

For others who want to try this out, head over to chrome://flags, search for “Dark”, and enable “Dark/light mode of system UI” and “Force Dark Mode for Web Contents”.

8 Likes

We have a light and a dark theme. The dark theme renders everything the way we want, also tag icons and topic previews. But the dark color scheme has quite some glitches, when using these addons. I just wonder: why not be able to set a default theme for automatic dark mode, instead of a default color scheme? The theme seems to allow for much better adjustments than the color scheme.

1 Like

I suspect you mean that there are some dark mode glitches with the topic previews plugin? If I click on the site on your user profile, I do see some hover colors are wrong when in dark mode. Maybe the topic previews plugin needs a small update to better support dark mode (there is a guide for plugins devs), if so, I think it’s worth raising the issue in that plugin’s topic.

We cannot switch themes on-the-fly, themes can have custom javascript code, and it’s not possible to switch the javascript code without reloading the page.

8 Likes

hm, I don’t see it in the latest version.

1 Like

Right, the checkbox shows up if there is only one available dark scheme, we have recently introduced the WCAG-compatible schemes, and that changes the interface to the two dropdowns you see under Color Schemes in your screenshot.

Users wanting to disable automatic dark mode can click on the Dark Mode dropdown, and set it to “Same as Regular”.

5 Likes

Is it possible to have this box unchecked by default? Most members of our community are not used to navigating the site in dark mode. Some users who would still like to have the auto dark mode option.

4 Likes

Is it worth revisiting this now? The feature is behind a flag in Chrome OS Stable. By default, the recently released Chrome OS 89 update still doesn’t have the toggle visible.

Also, there are new enhancements that focus on PWAs (working flawlessly in Chrome OS Canary). Perfect for Discourse!

2 Likes

Sure, feel free to try dark mode on a Chromebook and let us know how it goes.

8 Likes

Is this still the best way to test this feature? I don’t see any change to the theme on try when I visit using my chromebook and enable/disable dark mode. Even refreshing the web page does nothing. I’m on the latest version of chromeos. I also tried creating a test account and did the same with no change.

I also had a look around on other sites I use, including self-hosted and Teams, and am not able to get this to automatically change based on my device dark mode setting.

ps- loving the screencast feature in chromeos. Pretty sweet! :heart_eyes:

2 Likes

It doesn’t work on my Chromebook either, but have you tried closing the Chrome program, turning dark mode on, and then relaunching Chrome to see if it works?

As for that new screenshot/record feature in Chrome OS 89, it is totally awesome. Certainly better than Windows and macOS! :smile:

1 Like

I just tried… no dice. :no_entry_sign: :game_die:

Incidentally, just learning about how to do this on my macbook pro as well, and am shocked at how well it works. The color changes instantaneously across all the apps a browser tabs I Have open as I change to dark/light mode. Pretty nice!

3 Likes

It works well on Windows too.

Are you willing to briefly switch your Chromebook to the Canary channel?

1 Like

So it works on Windows, and iOS, but not on ChromeOS? That’s what the testing shows? That implies to me that ChromeOS maybe needs some updating or isn’t doing it quite the same as everyone else? Any thoughts @pmusaraj?

5 Likes

Yes, this is very much a ChromeOS issue, it works well on all OSes that support dark mode, i.e. macOS, Windows, iOS, Android and several Linux flavors. There is really nothing for us to do here.

7 Likes

Yeah, that looks to be the case. It is unfortunate, but I’m going to try testing it in the Canary channel to see if it works there. Wish me luck! :smile:

2 Likes

Pretty sure all you need to do is wait. Google does a great job updating ChromeOS in my experience.

5 Likes

Part of me just really wants to see it in action. As far as I’m concerned, it is available in the Canary channel. I could wait, but it seems that Google is constantly delaying the feature. It might not even make it to the Stable channel until (maybe) June.

1 Like

Is this intentional?