How to Detect If the Os Is in Dark Mode in Browsers

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

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

How can I detect if Dark Mode is enabled on my website?

This is now possible as WebKit has added support for the prefers-color-scheme CSS media query. You can use it like so:

@media (prefers-color-scheme: dark) { 
    body { background: black; }
}

Or in JavaScript:

function isDarkModeEnabled() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}

Read more about Dark Mode Support in WebKit. This is available as of Safari 12.1, see Can I use... for the latest info on browser support.

How to detect if OS X is in dark mode in browser JavaScript?

Use the matchMedia function to check the compliance with the prefers-color-scheme media rule:

const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
// or
const isLight = window.matchMedia('(prefers-color-scheme: light)').matches;

You can also get a notification when the Dark Mode turns on/off:

const media = window.matchMedia('(prefers-color-scheme: dark)');

media.addListener(() => {
  alert(`The mode has changed to ${media.matches ? 'dark' : 'light'}`);
});

How can my website detect if a browser is using a dark/light theme NOT if the OS is using a theme

You're mistaken, prefers-color-scheme ALSO gets the preference of the browser's theme — but not in the way you think. If you're thinking about those browser themes you find on the Chrome Web Store or Firefox's Add-On Store, unfortunately, none of the current browsers implement in such that it accommodates for WebExtensions.

prefers-color-scheme gets the theme from the OS, but ALSO the browser if its overridden or behind a user preference. On Firefox, adding ui.systemUsesDarkTheme to about:config and setting it to 0 always makes (prefers-color-scheme: dark) true regardless of the OS's preference. On Android, the Samsung Browser I believe has a option in three dots menu to enable dark mode all the time, which also overrides Android's settings. So, continue using prefers-color-scheme and expect future browsers to do what you're looking for.

How do I detect dark mode using JavaScript?

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

To watch for changes:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

Is there a way to know whether the OS supports dark mode in a web page? (by JavaScript, CSS)

alert doesn't run because there is nothing in your try-block that throws an error. The if-condition returns true/false, which means you need a simple if/else-statement:

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
   // dark mode
} else {
  // light mode
}

If you need to detect if the media query string prefers-color-scheme is supported by the browser, then you may have to explicitly check for both light and dark:

function isPreferredColorSchemeSupported() {
  return (
    window.matchMedia &&
    (window.matchMedia('(prefers-color-scheme: light)').matches ||
      window.matchMedia('(prefers-color-scheme: dark)').matches)
  );
}

If false is returned, then you know that the browser didn't match the light or the dark media query, from which you can infer that the browser didn't understand the media query.

---

Related Topics