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

Question

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.

Fleer

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. – Poi

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 :-) – Zaccaria

For CSS - @media (prefers-color-scheme: dark) { } – Phobos

Answer 1

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.

---

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

---

EDIT (23 Jan 2024):

Currently 96.5% of the world can use dark mode CSS. Source: caniuse.com

Mollee

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. – Liverpudlian

@HermanStarikov I posted a update on this issue you are describing. With the new Safari Technology Preview Release 71 you can toggle in realtime. – Mollee

Nice! I made a little demo of what theming would look like with bootstrap: twitter.com/Hermanhasawish/status/1071517994302562305 – Liverpudlian

Is there a way to detect this in JavaScript? – Saintmihiel

@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. – Mollee

The way to see this in JS is in this other answer. – Valdes

Using prefers-color-scheme in <link rel="stylesheet" ...> also works. E.g.: <link rel="stylesheet" media="(prefers-color-scheme: light)" type="text/css" href="light.css" /> and <link rel="stylesheet" media="(prefers-color-scheme: dark)" type="text/css" href="dark.css" /> warning: in Firefox (88 for Ubuntu) media="(prefers-color-scheme: dark)" interfered badly with title="Style Name" which can be used to switch between alternate style sheets. Using the title attribute caused Firefox to not select the dark mode style sheet (the second). – Geber

In Chromium 91 on Ubuntu 20 <link rel="stylesheet" media="(prefers-color-scheme: light)"... etc. does not work. The dark mode switch #enable-force-dark enables an independent rendering heuristic. – Geber

How does this work in Gmail or other email clients? We cannot get going. – Celloidin

Your test page link currently yields some TLS certificate validation error (it requires HTTPS due to HSTS). – Inebriant

Answer 2

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

Floccus

Hi! This works great. I'm curious though — how exactly does this syntax work? – Valdes

@Valdes 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. – Floccus

With the new Elvis operator this can be written as if (window.matchMedia?('(prefers-color-scheme: dark)').matches) { } – Floccus

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! – Valdes

Should be the checked answer. – Erinaceous

@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; }); – Reprise

@StefanRein as far as I know all browser versions that support matchMedia also support addEventListener, so this should not cause errors. – Floccus

@MarkSzabo my cordova app just crashed with window.matchMedia('(prefers-color-scheme: dark)').addEventListener is not a function. While on my desktop browser everything worked. It was a WKWebView iOS 13 with cordova-ios 5.1.1 – Reprise

@StefanRein did you include feature checking like window.matchMedia && ? – Floccus

@MarkSzabo No, because the method addListener did work on the returned MediaQueryList of the matchMedia() method. Since matchMedia does exist it would still crash with a function call which not exists – Reprise

Not working in mac 2021 – Mn

Answer 3

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.

Abulia

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. – Consuelaconsuelo

Answer 4

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

Fanlight

According to Mozilla? Citation needed ... – Inebriant

Answer 5

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.

Miniaturize

It's there now - developer.mozilla.org/en-US/docs/Web/CSS/@media/… – Barge

Answer 6

Using BootStrap 5.3.0-alpha1 and based on Mark Szabo's answer, I used this (I was using TypeScript):

    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
        switchColorScheme();
    });

    function switchColorScheme() {
        document.querySelector('html')!.dataset.bsTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? "dark"
            : "light";
    }

    switchColorScheme();

Before the page is loaded, it already detects the browser's current light or dark mode, and sets the bootstrap property on the element accordingly.

Nolie

Answer 7

It's not official yet but you can use:

background-color: canvas color: canvasText

Current Official: https://www.w3.org/TR/css-color-3/ Draft Recommendation: https://www.w3.org/TR/css-color-4/

(Don't slam me for posting this. I'm not promoting it I'm just saying it works.)

Firedrake

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Slapup

How does that detect if the browser is in dark mode? – Clausius