Dark Mode Theme Switch (for Safari on macOS and iOS 13)

This is an experimental component. Use at your own risk!

Repository:

https://github.com/pmusaraj/discourse-dark-mode

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

Configuration

  • 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.

23 Likes

Awesome, although flux is overkill just to toggle dark mode on the mac. Night Owl will do the same thing without interfering with anything else.

4 Likes

I just pushed a small update to this theme component to make it compatible with iOS 13 (which will ship with Dark Mode as well as an option to automatically enable it in the evenings).

9 Likes

Thanks for this awesome component, I’ve been looking for this! Unfortunately I can’t seem to get it to work. Perhaps something trivial but where do I find the dark theme id? Is that just the name of the theme?

1 Like

Thanks!

The ID is the number of the theme in the URL when you’ve selected it in the admin. In this URL: /admin/customize/themes/39 for example, it’s 39.

1 Like

Awesome, works like a charm, thanks! Really hope this becomes part of the standard discourse install.

1 Like

Google Chrome now supports dark mode on iOS 13 and iPadOS 13. I’m not too sure about dark mode support for Google Chrome on MacOS Mojave or MacOS Catalina though.

When will support for Google Chrome arrive?

it should work in Chrome already, under the hood it uses the prefers-color-scheme media query and browser support for it is pretty good nowadays: Can I use... Support tables for HTML5, CSS3, etc

Oh, that’s good to hear! :grinning:

Yeah, I also really hope that this becomes part of the standard Discourse install. Some people only like to update their forums and don’t really go beyond that.

@pmusaraj one thing I noticed is that the switching only works for logged in users, is there a way to also have it automatically set for anonymous users that haven’t created an account yet (e.g. switch to dark theme while using a private browser window)?