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 enabled on meta.)
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 https://meta.discourse.org/t/alternative-logos-for-dark-light-themes/88502 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:
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”.
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.
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.
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”.
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.
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!
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?
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.
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?
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.
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!
But does this work out of the box for a new Discourse install? Hopefully yes?
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.
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?
Now I can read twice as much. 