looks like as of this year, Discourse now has a dark mode feature built-in
looks like we can use the existing Discourse themes we’ve already got as defaults too (based on the previous theme component linked at the top)
2 Likes
there are two dark mode themes, yes, but with this it adds a dark mode toggle to the top of the page as well as automatic dark mode based on your device’s settings (I’ll change the title to make it more clear)
1 Like
I reported this two years ago:
It has support for it, but check your user preferences (preferences/interface):
It works for me on Firefox, switching browser theme preferences leads to instant change.
1 Like
they just recently merged it into Discourse Core back in February (I believe it was previously a third-party add-on of some sort)
I’m aware we have those themes, this isn’t about those
this is about having automatic dark mode based on your device’s settings (screenshot from a different Discourse forum I’m on):
Yes, and it seems to work as expected in my browser (FF/linux mint), though it seems to depend on user preferences as shown in my screenshot above. Perhaps it doesn’t work properly on all platforms though.
It relies on prefers-color-scheme - CSS | MDN
1 Like
So, what’s missing here, is to copy those 2 alternative colour sets (prefers-color-scheme dark and light) in each stylesheet, from the other stylesheet?
- MetaBrainz style, Dark (WIP)
- MetaBrainz style, Light (WIP)
ah, I totally missed the checkbox below the theme selection, lol… it’s working on my setup now
that said, based on this comment here, we might only have one theme marked as a dark mode theme? therefore we can choose any light mode theme, but only the MetaBrainz dark mode theme
correct, you can choose a light theme, but you can’t choose an automatic dark theme. if you select “Enable automatic dark mode color palette” you can only get MeB Dark as your dark mode theme at the moment
Yes, because only one default dark theme can be chosen. You still can select the other dark theme manually though.
Ah! so this automatic dark mode based on your device’s settings option requires that you select a Light theme!
At first, I didn’t understand.
The prefers-color-scheme you initially linked, is more powerful, it allows to have a theme to be Light/Dark combined on its own.
1 Like
so this automatic dark mode based on your device’s settings option requires that you select a Light theme!
The prefers-color-scheme you initially linked, is more powerful, it allows to have a theme to be Light/Dark combined on its own.
Those are not two separate things, but two parts of the same things. The “prefers-color-scheme” is how the browser makes the device settings available.
In Discourse you need to enable “Enable automatic dark mode color palette” to make Discourse consider the “prefers-color-scheme” setting from the browser. And as the naming suggests it automatically switches to the default dark theme, if the browser reports that the dark theme is preferred. But if not, it uses the theme as configured in the user settings (which can be a dark theme).
So yes, if you want Discourse to switch to a light theme also, then you need to select a light theme in the settings.
2 Likes
@zas The question is still, why the configuration is a bit different.
On https://meta.discourse.org/ the settings are as shown in UltimateRiff’s screenshot, where the user can select a theme, and explicitly choose another theme to use if dark mode is requested by the browser / device.
In our Discourse there is instead that checkbox, which will use a default dark theme then (in our case seems to be the MB dark style). This option also is not new and exists for quite some time.
Is this just a difference in version, and the new (I assume) option will become available once Discourse gets updated. Or are we already on a reasonable new version, but this new configuration must be explicitly enabled?
1 Like
Currently we run on Commits · discourse/discourse · GitHub (3.5.0.beta7-dev) so fairly new I guess.
No idea
1 Like
based on the thread linked in the OP, I believe so
1 Like