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!