ChatGPT解决这个技术问题 Extra ChatGPT

How to detect if the OS is in dark mode in browsers?

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.

As far as I know, there is no CSS media query for Safari to detect the light or dark mode, but Safari definitively supports dark widgets in HTML pages. It may be helpful to file a radar for it.
Don't hiurt me, but after Stackoverflow introduced the dark mode I googled how they implemented the "system" mode and stumbled upon this question. I expect a lot of traffic on this :-)

D
Davy de Vries

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


Just tested it. If you change the theme in your mac os settings, then you need to restart the browser. Too bad it's not synced on the fly.
@HermanStarikov I posted a update on this issue you are describing. With the new Safari Technology Preview Release 71 you can toggle in realtime.
Nice! I made a little demo of what theming would look like with bootstrap: twitter.com/Hermanhasawish/status/1071517994302562305
Is there a way to detect this in JavaScript?
@AkashKava I Googled around, yes it’s possible if you use something like this: window.matchMedia("(prefers-color-scheme: dark)").matches If I have some spare time I will add a full javascript solution to my answer.
M
Mark Szabo

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";
});

Hi! This works great. I'm curious though — how exactly does this syntax work?
@Stormblessed first it will check if the browser supports matchMedia and then it will try to match the prefers-color-scheme: dark string. If it matches we are in dark mode.
With the new Elvis operator this can be written as if (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
oh that makes sense! The syntax with .matches looked like it was doing the comparison between the first thing and the second or something. Thanks!
@MarkSzabo Your code does work, but is not cross platform compatible like 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; });
J
Jeff

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.


Do not use 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.
A
Aslam

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; }

t
toeffe3

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.