Hello Darkness

01. April 2020

Bild der Website in dunklem Outfit

Solltet ihr ein Gerät nutzen, das einen Darkmode hat, so färbt sich dieses kleine Blog nun auch entsprechend eurer Systemeinstellung.

Mit Hilfe der Beschreibung von Jeremy Keith konnte ich, das ganz schnell umsetzten.

Eigentlich ist es sehr, sehr einfach. Einfach den folgenden Code in seine style.css packen und die gewünschten CSS-Eigenschaften für den Darkmode hinterlegen.

@media (prefers-color-scheme: dark) {  

/* Hier steht dein CSS-Code für den Darkmode */
foo {
    color: #fff;
    background: #000; 
    }
}

Man könnte jetzt noch überlegen, ob man ein Schalter im Blog möchte, in dem man die Einstellung überschreiben kann. Thomas Steiner beschreibt das hier auch ganz gut.

Zum erstellen des Bildes habe ich Screely genutzt.