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

by

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.

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

More Related Contents:

  1. How can I remove the gloss on a select element in Safari on Mac?
  2. Media Queries: How to target desktop, tablet, and mobile?
  3. How can I force WebKit to redraw/repaint to propagate style changes?
  4. Why does the order of media queries matter in CSS?
  5. CSS @media print issues with background-color;
  6. Common breakpoints for media queries on a responsive site
  7. Should I use max-device-width or max-width?
  8. Media query to detect if device is touchscreen
  9. CSS3 animation not working in safari
  10. Common CSS Media Queries Break Points [duplicate]
  11. CSS media query to target only iOS devices [duplicate]
  12. What are the rules for CSS media query overlap?
  13. CSS native variables not working in media queries
  14. @Media min-width & max-width
  15. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  16. How to force re-render after a WebKit 3D transform in Safari
  17. Which are the most important media queries to use in creating mobile responsive design?
  18. CSS media queries min-width and min-device-width conflicting?
  19. calc() not working within media queries
  20. Is there a way to apply styles to Safari only?
  21. Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
  22. iPhone X / 8 / 8 Plus CSS media queries
  23. How to control number of items per row using media queries in Flexbox?
  24. How do I combine two media queries?
  25. How can I avoid media query overlap?
  26. Media Query grouping instead of multiple scattered media queries that match
  27. Bootstrap – Removing padding or margin when screen size is smaller
  28. CSS background-position not working in Mobile Safari (iPhone/iPad)
  29. Media Queries – Mobile vs Desktop Browser
  30. Why on Safari the transform translate doesn’t work correctly?

Leave a Comment