29

Get ready for "prefers-color-scheme" media queries to toggle between light/dark interfaces

over 4 years ago from , Founder at Narro

The latest Safari Technology Preview (Release 68, Safari 12.1, WebKit 14607.1.11) has implemented support for this media query to allow you to tailor your site to dark modes.

This will very likely be mirrored in Chrome/Firefox within the year.

You can see an example here if you're running the latest Tech Preview, and if you're not you can at least see what the queries will look like.

9 comments

  • Account deleted over 4 years ago

    Web agencies will be frothing at charging their clients twice for this.

    9 points
    • Devin FountainDevin Fountain, over 4 years ago

      And the agencies are going to have a tough time selling this one. I'd love to sit in on one call to listen to them pitch this to a client as important.

      2 points
      • Astrit MalsijaAstrit Malsija, over 4 years ago

        I can only imagine some one trying to sell it.

        Dear customer In dark mode you save energy, so save the planet it is only $5.000 feature.

        2 points
  • Christoph OChristoph O, over 4 years ago

    I like this. Going to add it to Explore Monero where I added a small toggle next to the logo. It uses CSS variables to switch themes which makes the whole thing super easy to implement. Even easier with this media query now.

    People might make fun of light/dark modes, but I've gotten a lot of positive feedback from people for it on this and another project. So clearly seems to be something people appreciate.

    2 points
    • Joshua TurnerJoshua Turner, over 4 years ago

      I think the real solution is a combination of these two methods.

      Give new users a predictable experience that conforms with their OS preference, but still offer them the ability to override it via toggle.

      With dark mode very likely coming to iOS 13, I'm sure this will be available to devs via some flag.

      2 points
      • Christoph OChristoph O, over 4 years ago

        Makes total sense. I'd be curious to see statistics on how many people change their preference to dark.

        0 points
  • Per VPer V, over 4 years ago

    I wish Safari would focus on fixing shit that doesn't work. Safari is the new IE, I rarely #$@&%*! at IE any more, but Safari, that's a whole nother story...

    0 points
    • K. D., over 4 years ago

      to be honest, I think the same thing for chrome. it is very surprising, all major browser owners are part of W3C. Each of them creates a spec for their marketing agenda. Most of the case, implement comes first before introducing as a spec. "Only Chrome experiments, Only in Safari, Firefox X Mode, Super State on XXXX blah blah" The fight is not about giving to users the best user experience, the fight is about being a platform and when developers provide something using with "fancy features ( oo noo it should be spec of W3C )", it is being a part of that platform. In reality, the customers want to work their product properly every environment. Let's start another war "feature check - world wide web 2.0 -- 3.0"

      4 points
  • Erik TerwanErik Terwan, over 4 years ago

    Really nice that it animates between the modes, even background images fade smoothly; https://codepen.io/erikterwan/pen/zmyjxy

    0 points