Mikä on prefers-color-scheme?

prefers-color-scheme on CSS:n mediaominaisuus, joka kertoo verkkosivustoille, haluatko käyttää tummaa vai vaaleaa teemaa. Selaimet saavat tiedon Windowsin, macOS:n, Linuxin, Androidin tai iOS:n tumman tilan asetuksesta, ja sivustot vaihtavat värejään CSS:n @media (prefers-color-scheme: dark)- tai JavaScriptin window.matchMedia("(prefers-color-scheme: dark)")-kyselyllä. Jos sivusto pysyy vaaleana, vaikka järjestelmäsi on tumma, tarkista ensin, mitä selaimesi todella ilmoittaa.

Työkalun kuvaus

Tämä työkalu näyttää järjestelmäsi teeman suuressa lohkossa: Tumma kuun kanssa tai Vaalea auringon kanssa. Se kysyy selaimeltasi, täsmääkö prefers-color-scheme: dark, ja seuraa muutoksia. Kun siis vaihdat laitteen asetuksissa tumman ja vaalean tilan välillä, tulos päivittyy heti ilman sivun uudelleenlatausta. Jos teemaa ei ilmoiteta tummaksi, tuloksena näkyy Vaalea.

Tulos vastaa sitä, mitä selaimesi kertoo verkkosivustoille, eikä se aina vastaa järjestelmäsi asetusta. Esimerkiksi Firefoxissa on Sivustojen ulkoasu -asetus, jolla kaikki sivustot voi asettaa vaaleiksi tai tummiksi järjestelmän asetuksesta riippumatta.

Ominaisuudet

  • Näyttää yhdellä silmäyksellä, onko teema Tumma vai Vaalea
  • Päivittyy reaaliajassa, kun vaihdat järjestelmän teemaa
  • Toimii selaimessasi eikä vaadi asennusta