Similar to "How to detect if OS X is in dark mode?" only for browsers.
Has anyone found if there is a way to detect if the user's system is in the new OS X Dark Mode in Safari/Chrome/Firefox?
We would like to change our site's design to be dark-mode friendly based on the current operating mode.
The new standard is registered on W3C in Media Queries Level 5.
NOTE: currently only available in
Safari Technology Preview Release 68
In case user preference is light
:
/* Light mode */
@media (prefers-color-scheme: light) {
body {
background-color: white;
color: black;
}
}
In case user preference is dark
:
/* Dark mode */
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
There is also the option no-preference
in case a user has no preference. But I recommend you just to use normal CSS in that case and cascade your CSS correctly.
EDIT (7 dec 2018):
In Safari Technology Preview Release 71 they announced a toggle switch in Safari to make testing easier. I also made a test page to see the browser behaviour.
If you have Safari Technology Preview Release 71 installed you can activate through:
Develop > Experimental Features > Dark Mode CSS Support
Then if you open the test page and open the element inspector you have a new icon to toggle Dark/Light mode.
https://i.stack.imgur.com/z2SYe.png
EDIT (11 feb 2019): Apple ships in the new Safari 12.1 dark mode
EDIT (5 sep 2019): Currently 25% of the world can use dark mode CSS. Source: caniuse.com Upcoming browsers: iOS 13 ( I guess it will be shipped next week after Apple's Keynote) EdgeHTML 76 (not sure when that will be shipped)
EDIT (5 nov 2019): Currently 74% of the world can use dark mode CSS. Source: caniuse.com
EDIT (3 Feb 2020): Microsoft Edge 79 supports dark mode. (released on 15 Jan 2020) My suggestion would be: that you should consider implementing dark mode because most of the users can use it now (for night-time users of your site). Note: All major browsers are supporting dark mode now, except: IE, Edge
EDIT (19 Nov 2020): Currently 88% of the world can use dark mode CSS. Source: caniuse.com CSS-framework Tailwind CSS v2.0 supports dark-mode. (released on 18 Nov 2020)
EDIT (2 Dec 2020): Google Chrome adds Dark Theme emulation to Dev Tools. Source: developer.chrome.com
EDIT (2 May 2022): Currently 90% of the world can use dark mode CSS. Source: caniuse.com
If you want to detect it from JS, you can use this code:
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
// dark mode
}
To watch for changes:
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
const newColorScheme = e.matches ? "dark" : "light";
});
matchMedia
and then it will try to match the prefers-color-scheme: dark
string. If it matches we are in dark mode.
if (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
addListener
see here: developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/… So it should be: window.matchMedia('(prefers-color-scheme: dark)').addListener(e => { this.darkMode = e.matches; });
Spec has launched (see above), available as a media query. Something has already landed in Safari, see also here. So in theory you can do this in Safari/Webkit:
@media (prefers-dark-interface) { color: white; background: black }
On MDN a CSS media feature inverted-colors
is mentioned. Plug: I blogged about dark mode here.
inverted-colors
for detecting dark mode. First of all, it won't work. Second of all, it's used for accessibility, NOT aesthetic. Some users use inverted mode to enhance the contrast of their screen, typical if they have impaired vision. Please do not change the appearance of your site given inverted-colors
as it will, at best, not work how you want, and at worst it will frustrate those users.
According to Mozilla, here is the preferred method as of 2020
@media (prefers-color-scheme: dark) {
body {
background: #000;
}
}
@media (prefers-color-scheme: light) {
body {
background: #fff;
}
}
For Safari/Webkit you can use
@media (prefers-dark-interface) { background: #000; }
I searched though Mozilla API, they don't seem to have any variables corresponding to the browser-windows color. Though i found a page that might help you: How to Use Operating System Styles in CSS. Despite the article-header the colors are different for Chrome and Firefox.
Success story sharing
window.matchMedia("(prefers-color-scheme: dark)").matches
If I have some spare time I will add a full javascript solution to my answer.