30

How can I detect if the user of my website is using macOS / Windows with Dark Mode enabled using JavaScript or CSS? Is this possible?

mikemaccana
  • 110,530
  • 99
  • 389
  • 494
Mehmet Ali Peker
  • 701
  • 1
  • 6
  • 19
  • 2
    Related: [How to detect if OS X is in dark mode?](https://stackoverflow.com/q/25207077) – Makyen Jun 06 '18 at 23:01
  • 2
    @Makyen No, I want do this using JavaScript – Mehmet Ali Peker Jun 09 '18 at 16:35
  • I merely said it was related, which it is. Are you saying it's some other Dark Mode that you want to detect?. I did not say it was a duplicate, which it obviously isn't. – Makyen Jun 09 '18 at 18:09
  • Simple curiosity, which might help to narrow your question, Why would this matter? Are there specific changes you want to detect? Also note that many users have personal themes for their browser, and this is a secret most browsers will try to hide to scripts. So I guess the ones of the OS will also be hidden (if the browser itself even knows about it...) – Kaiido Jul 15 '18 at 23:48
  • 3
    This is very relevant question, normal web pages look like a "bright white square" on the otherwise dark display with dark mode. This is being worked on in W3C standardisation, see discussion at https://github.com/w3c/csswg-drafts/issues/2735 Probably you can prepare now by creating a manually selectable dark/light mode for your website that users can choose today, and later automate the selection when the standard or Safari CSS API becomes available. – haa Jul 26 '18 at 22:31
  • 2
    This is a very specific question identifying what needs to be detected and the constraints on the solution. I've also been searching and unfortunately at this time I believe the answer is "you can't, but it's being considered". Discussion here: https://github.com/w3c/csswg-drafts/issues/2735 – svachalek Sep 07 '18 at 17:39
  • related [check if darkreader extension is enabled](https://github.com/darkreader/darkreader/issues/4342) – milahu Feb 12 '22 at 09:25

2 Answers2

30

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.

Jordan H
  • 52,571
  • 37
  • 201
  • 351
  • 2
    This same method is also going to be supported in Firefox 67 (May 14, 2019) and Chrome 76 (July 30, 2019). Presumably, Edge-on-Chromium will also get this once they move up to the Chromium 76 on the back-end (current pre-release builds are based on Chromium 75). – Truisms Hounds May 07 '19 at 14:15
  • Can confirm this works on Firefox & Chrome as of January 6, 2020 (probably much earlier, but I can say with 95% certainty that you are reading this on or after that date) – andrewtweber Jan 06 '20 at 19:54
  • @andrewtweber Please check caniuse https://caniuse.com/#feat=prefers-color-scheme – Mehmet Ali Peker Jan 08 '20 at 19:26
  • @jordan-h why are we checking if `window.matchMedia` exists? Wouldn't just checking if `window.matchMedia('(prefers-color-scheme: dark)').matches` exists do the trick? – Mix Master Mike Feb 20 '20 at 18:45
  • 1
    @MixMasterMike `matchMedia` isn't available for all browsers, see https://caniuse.com/#feat=matchmedia – Jordan H Feb 20 '20 at 18:52
18

If you want to detect if a user prefers dark mode via JavaScript you can use matchMedia:

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

Browser support: https://caniuse.com/#feat=prefers-color-scheme

adriaan
  • 1,088
  • 1
  • 12
  • 29
  • 1
    Thanks! CSS is useful, but some thing (eg, theming Stripe Elements) require colors to be in JavaScript, where this technique is important. – mikemaccana May 31 '19 at 14:39