Chrome 76 Unterstützung für die lieber-Farbe-Schema, CSS-media-query, die es erlaubt, Webseiten zu bitten, Ihr Betriebssystem mit, welche Farbgebung Sie bevorzugen, so können Sie Thema sich entsprechend. Hier ist, wie stellen Sie es für Ihre website.
Welche Browser Unterstützt Düstere Themen?
Wie des Schreibens, die meisten der großen Browser unterstützen dunkel-Modus, obwohl einige Browser noch nicht aktualisiert, um zu unterstützen es noch. Sie können den aktuellen status auf caniuse.com, generiert eine support-Tabelle für verschiedene Browser:
Wie üblich, IE 11 ist nicht erhalten, keine updates, und die 2% die das Internet immer noch nicht auf, es wird nicht in der Lage sein, es zu nutzen. Aber, diese Leute sind wahrscheinlich nicht auf Windows 10, so dass Sie nicht sehen, jede Verwendung auch ohne ein dunkles Thema zu wechseln.
Zum Glück, mit bevorzugt-Farbe-Schema nicht brechen wird Ihr CSS, da es sich um einen optionalen parameter.
Wie Verwenden von CSS-Farbschema-Support
Tatsächlich nutzen zieht-color-scheme in der CSS, die Sie möchten, verwenden Sie es als eine optionale media-query, auf die gleiche Weise tun würde, für eine ansprechende Gestaltung. Zum Beispiel, wenn Ihr Standard ist weißer hintergrund mit schwarzem text, können Sie die media-query zu ändern auf schwarzem hintergrund und weißem text.
body {
background-color: #fff;
color:#000;
}
@media (bevorzugt-Farbe-Schema: dunkel) {
background-color: #000;
color:#fff;
}
Kombinieren Sie dies mit einer anderen Technik, die Sie verwenden—zum Beispiel konnten Sie nur zulassen, dark-Modus auf mobile Geräte, wenn Sie in Kombination mit einem responsive media query für Bildschirm-Größe.
Gesetzt, ein Dunkles Theme mit CSS-Variablen
CSS-Variablen sind eine relativ neue Ergänzung mit breiter Unterstützung. Sie sind vielleicht der einfachste Weg, zu einem dunklen Thema neben bevorzugt-Farbe-Schema. Statt der Festlegung der Farbwerte manuell, etwa so:
body {
background-color: #fff;
}
p {
color: #000;
}
Erstellen Sie stattdessen ein :root-block wird überall gelten. Definieren Sie Variablen, die hier durch die Verwendung der doppelte Bindestrich (–) gefolgt von den Namen der variable. Dann, Wann immer Sie brauchen, um einen Wert definieren, verwenden Sie den Namen der Variablen innerhalb der var () – Funktion statt:
:root {
–primary: #000;
–background: #fff;
}
body {
background-color: var(–background);
}
p {
Farbe: var(–primary);
}
Diese Methode hat den wunderbaren Vorteil, in der Lage zu ändern, die Variablen und änderungen überall. Direkt unterhalb der root-block, können eine weitere innen die bevorzugt-color-scheme-media-query:
:root {
–primary: #000;
–background: #fff;
}
@media (bevorzugt-Farbe-Schema: dunkel) {
:root {
–primary: #ddd;
–background: #222
}
}
body {
background-color: var(–background);
}
p {
Farbe: var(–primary);
}
Dies setzt die Variablen für die dunklen Werte, wenn der browser erkennt, dass der Benutzer bevorzugt eine dunkle Schema. Sie können diese beiden Paletten von Farben und leicht zwicken Sie nur durch ändern der Variablen.
Darüber hinaus, wenn Sie benötigen zusätzliche CSS-Datei für das dunkle Thema, können Sie, dass in einem anderen vorzieht-color-scheme-Abfrage, jedoch würden Sie wahrscheinlich wollen zu platzieren, dass man unten den rest der CSS, so dass es Vorrang hat, oder verwenden Sie die !wichtig Flagge.
Fallback Für IE 11
IE 11 nicht unterstützt diese (offensichtlich). Möchten Sie, dass IE 11 unterstützt, können Sie die uralte Methode der Verdoppelung Ihrer Eigenschaften:
p {
color: #000;
Farbe: var(–primary);
}
Dieser Weg, der IE 11 wird nur die erste, und sehen die anderen als ungültig CSS. Dark themes funktionieren nicht, aber Sie würde sowieso nicht, da es keine Unterstützung für die Medien-Abfrage.
Darüber hinaus, wenn Sie nicht möchten, verwenden Sie CSS-Variablen, können Sie nur umgestalten Ihrer Website innerhalb der bevorzugt-color-scheme-Abfrage, aber das ist umständlich und verschwendet Speicherplatz. Wenn müssen Sie unterstützen jeden browser in der Existenz, verwenden Sie die doppelte Eigenschaft fallback statt.