Wednesday, October 24, 2018

Safari Technology Preview Adds Dark Mode CSS

Safari Technology Preview Release 68 is now available for download for macOS Mojave and macOS High Sierra.

[…]

Added prefers-color-scheme media query support for styling dark mode content (r237156)

W3C:

The prefers-color-scheme media feature is used to detect if the user has requested the system use a light or dark color theme.
no-preference
Indicates that the user has made no preference known to the system. This keyword value evaluates as false in the boolean context.
light
Indicates that user has notified the system that they prefer an interface that has a light theme.
dark
Indicates that user has notified the system that they prefer an interface that has a dark theme.

Previously: Supporting Dark Mode.

Update (2018-10-25): Craig Hockenberry:

After downloading Release 68 and making sure that Dark Mode CSS Support is turned on in the Develop > Experimental Features menu, you can do this in your CSS:
div {
  background-color: pink;
}

@media (prefers-color-scheme: light) {
  div {
    background-color: yellow;
  }
}

@media (prefers-color-scheme: dark) {
  div {
    background-color: purple;
  }
}
As you switch in and out of Dark Mode, the div will change color. If you need a more interactive approach, say to show a theme-switching control at page load, you can use JavaScript to check the media query string:
var inDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

CSS Dark Mode Mac macOS 10.14 Mojave Safari Web

Safari Technology Preview Adds Dark Mode CSS

Comments RSS · Twitter

Leave a Comment