Mattepuffo's logo
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 this Post

Commentami!