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