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


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 Update themes and plugins to support automatic dark mode

55 Likes