# Dark Mode Automatic Theme Switcher
**URL:** https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071
**Category:** Theme component
**Tags:** deprecated
**Created:** [March 19, 2019, 4:12pm UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071 "2019-03-19T16:12:52Z")
**Posts on this page:** 15
**Page:** 1
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [March 19, 2019, 4:12pm UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/1 "2019-03-19T16:12:52Z")
> ⚠ Discourse now supports [Automatic Dark Mode color scheme switching](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593) in core, this component is now deprecated and should no longer be used.
[Repository](https://github.com/pmusaraj/discourse-dark-mode):
```plaintext
https://github.com/pmusaraj/discourse-dark-mode
```
Installation instructions: [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)
### What this does?
This component allows automatic switching to a dark theme when the browser is set to dark mode. This works **for logged-in users** only on all browsers that support the [prefers-color-scheme](https://caniuse.com/#feat=prefers-color-scheme) media query.
By default, this component is enabled and individual users can turn it off in their Preferences \> Interface screen. Admins can also set the component to be default off, in which case users will see a button to enable automatic switching in their interface preferences
[https://global.discourse-cdn.com/meta/original/3X/0/4/043dcb92eed5f4a179d050826cb1e009d16761f5.mp4](https://global.discourse-cdn.com/meta/original/3X/0/4/043dcb92eed5f4a179d050826cb1e009d16761f5.mp4)
### How it works?
If the browser is in dark mode, this component will reload Discourse with the dark theme enabled. If the browser returns to light mode, this component will reload with the default enabled theme.
It will also reload if 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`
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [March 19, 2019, 6:04pm UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/2 "2019-03-19T18:04:32Z")
Awesome, although flux is overkill just to toggle dark mode on the mac. [Night Owl](https://nightowl.kramser.xyz) will do the same thing without interfering with anything else.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [July 26, 2019, 8:32pm UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/3 "2019-07-26T20:32:00Z")
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).
---
### Author:  [@mekentosj](https://meta.discourse.org/u/mekentosj)
#### Post date: [November 12, 2019, 1:08am UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/4 "2019-11-12T01:08:52Z")
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?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [November 12, 2019, 1:11am UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/5 "2019-11-12T01:11:02Z")
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.
---
### Author:  [@mekentosj](https://meta.discourse.org/u/mekentosj)
#### Post date: [November 12, 2019, 1:12am UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/6 "2019-11-12T01:12:56Z")
Awesome, works like a charm, thanks! Really hope this becomes part of the standard discourse install.
---
### Author:  [@Justin\_Vega](https://meta.discourse.org/u/Justin_Vega)
#### Post date: [November 12, 2019, 2:25am UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/7 "2019-11-12T02:25:15Z")
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?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [November 12, 2019, 2:30am UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/8 "2019-11-12T02:30:45Z")
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](https://caniuse.com/#search=Prefers-color)
---
### Author:  [@Justin\_Vega](https://meta.discourse.org/u/Justin_Vega)
#### Post date: [November 12, 2019, 2:31am UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/9 "2019-11-12T02:31:53Z")
> [@pmusaraj](#):
>
> 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](https://caniuse.com/#search=Prefers-color)
Oh, that’s good to hear! 😀
> [@mekentosj](#):
>
> Really hope this becomes part of the standard discourse install.
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.
---
### Author:  [@mekentosj](https://meta.discourse.org/u/mekentosj)
#### Post date: [November 12, 2019, 2:46am UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/10 "2019-11-12T02:46:05Z")
@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)?
---
### Author:  [@terraboss](https://meta.discourse.org/u/terraboss)
#### Post date: [December 9, 2019, 8:32am UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/11 "2019-12-09T08:32:03Z")
> [@pmusaraj](#):
>
> 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.
Doesn’t work for me :-/
Just for future updates: It would be great, if there is some dropdown menu for choosing the right one.
---
### Author:  [@Nisutec](https://meta.discourse.org/u/Nisutec)
#### Post date: [December 9, 2019, 12:20pm UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/12 "2019-12-09T12:20:52Z")
> [@pmusaraj](#):
>
> This component follows your Mac’s or phone’s dark mode.
The “prefers-color-scheme” feature is also supported by windows. The newest Chrome Beta and newest Firefox Version supports this media query.
[https://global.discourse-cdn.com/meta/original/3X/3/8/387a86c5247e0e2f6835d9c46b217f191ccf4e8d.mp4](https://global.discourse-cdn.com/meta/original/3X/3/8/387a86c5247e0e2f6835d9c46b217f191ccf4e8d.mp4)
---
### Author:  [@tomtjes](https://meta.discourse.org/u/tomtjes)
#### Post date: [February 17, 2020, 4:27pm UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/13 "2020-02-17T16:27:09Z")
This component seems to create an issue with 2.4.0.beta11+39. In my registered-users-only community the login screen at [https://mydomain/login](https://mydomain/login) is blank. It works normally when this component is deactivated.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 17, 2020, 4:51pm UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/14 "2020-02-17T16:51:04Z")
I can’t reproduce this locally with latest Discourse and latest version of the component. When the login screen is blank, is there an error in the browser console?
Update: the issue Thomas was running into is now fixed in the component. Thanks for the report!
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [May 15, 2020, 12:26pm UTC](https://meta.discourse.org/t/dark-mode-automatic-theme-switcher/112071/15 "2020-05-15T12:26:52Z")
+1 for making this part of Discourse Core