This is an experimental component. Use at your own risk!
Installation instructions: How do I install a Theme or Theme Component?
What this does?
This component allows automatic switching to a dark theme when the browser is set to be in dark mode. At the time of writing this only works for authenticated users in Safari on macOS (Firefox is also expected to support this soon).
Individual users can opt-out of this behaviour through a checkbox in Preferences > Interface.
How it works?
If Safari is in dark mode, this component will reload Discourse with the dark theme enabled. If Safari is back to light mode, this component will reload with the default theme enabled.
It will also reload if Safari’s dark mode is toggled while user is on the site (as shown in video above).
(If you have more than two themes enabled, and the user has selected a theme other than default or dark, this component will do nothing, i.e. it will respect the user’s choice.)
- Make sure you have a dark theme installed, and that it is selectable by users
- Add this component to both the default theme and the dark theme (very important, if you don’t add it to both themes, users won’t be able to switch back to the default theme)
- In the component settings, enter the id of your dark theme in
dark theme id
This component follows your Mac’s or phone’s dark mode.