Identificare il color scheme impostato usando i CSS

Identificare il color scheme impostato usando i CSS

Come sapete alcuni sistemi operativi danno la possibilità di impostare il color scheme come dark o light.

Il primo esempio che mi viene in mente è macOS, che da qualche versione da la possibilità di impostare il tema dark.

Con i CSS è possibile creare delle regole di stile apposite, usando le media queries e la proprietà prefers-color-scheme.

Ecco un esempio:

            @media (prefers-color-scheme: dark) {
                h1 {
                    color: green;
                }
            }

            @media (prefers-color-scheme: light) {
                h1 {
                    color: red;
                }
            }

Sulla mia distro Linux, che ha il tema standard, la scritta si vede rossa.

Ma sul mio macOS si vede verde, in quanto ho impostato il tema dark.

Enjoy!




Share

Commentami!

About Mattepuffo.com

Blog dedicato all'informatica e alla programmazione!
Tutti i contenuti di questo blog, tranne casi particolari, sono sotto licenza Licenza Creative Commons Creative Commons Attribution-Noncommercial-Share Alike 2.5. .

2741 articoli
310 commenti
21 progetti
Altri link
  • About
  • Scrivimi
  • Copyright
  • Sitemap
  • matteo.ferrone@yahoo.it
  • GitHub
  • Privacy Policy