@media (prefers-color-scheme: dark) {
    :root {
        --body-bg: black;
        --body-bg-stronger: rgba(255,255,255,.3);
        --control-bg: rgba(255,255,255,.15);

        --body-color: rgba(255,255,255,.5);
        --front-color: white;
        --active-color: rgba(255,255,255, .9);
    }
}

Mit dem neuesten Update von macOS wird Safari 12.1 installiert. Damit ist Safari der erste Browser, der das neue CSS Media-Query-Feature prefers-color-scheme unterstützt.

Beitragsbild: cmonphotography, Quelle: Pexels

Durch das neue Feature kann abgefragt werden, ob das aktuelle Betriebssystem ein dunkles oder helles Theme nutzt. macOS hat seit dem Mojave-Update ein dunkles Theme und auch für Windows 10 soll es bald möglich sein, ein dunkles Theme einzustellen, das sich durch das gesamte System ziehen soll.

Ich nutze prefers-color-scheme übrigens bereits auf meiner Portfolio-Site.

Nützliche Links