Automatic Dark Mode color scheme switching

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”.

9 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.

9 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”.

7 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.

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

3 Likes

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?

6 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.

9 Likes

Could it possibly be enabled now?

2 Likes

Hmm, good point, how do we test this @pmusaraj on meta? I’ve enabled “dark mode” for apps in Windows 10 and I am seeing Twitter (web/Chrome) go dark, but not meta?

1 Like

Yes, this is still not enabled on meta because we have many themes enabled here, each designed to work with a specific color scheme. Plus we have the theme switcher in the hamburger menu, which doesn’t play well with color schemes.

3 Likes

Oh, I see. Does it work with a default install of Discourse? Can I get it to work with https://discourse.codinghorror.com/ ?

3 Likes

Yes, it works on a default install. It works on https://try.discourse.org, for example.

On https://discourse.codinghorror.com/ you might have to toggle the setting (by default it is set to None):

1 Like

Ah, I see. My install is quite old and only had one color scheme, light. I added a new color scheme based on the dark default, and that worked – I can verify that switching the dark and light color schemes in the Windows Settings automatically affects Discourse now! :tada:

But does this work out of the box for a new Discourse install? Hopefully yes?

3 Likes

It does, there are a few color schemes added by default (Light, Dark, WCAG Light, WCAG Dark). The setting is default off though, new admins need to find it to enable it.

3 Likes

Should we perhaps make a goal of having that setting be on by default in this release? As long as we ship default logos in the dark version it should be good?

5 Likes

Is there a way to only make it work with the “light” Discourse theme then?

1 Like

At the moment, no, we don’t have a way to enable automatic dark mode for just one theme.

1 Like

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.

6 Likes