Beispielcode zur Implementierung des Dunkelmodus mit CSS-Variablen

Vor kurzem wurde WeChat von Apple gezwungen, einen Dunkelmodus zu entwickeln. Immer mehr Websites und Anwendungen unterstützen den Dunkelmodus. Viele Menschen wählen den Dunkelmodus auch gerne für Websites. Vielleicht bevorzugen sie dieses Erscheinungsbild oder möchten ihre Augen vor Ermüdung schützen. Dieser Beitrag zeigt Ihnen, wie Sie einen automatischen CSS-Dunkelmodus implementieren, der sich je nach Thema Ihres Besuchers ändert.

Ich habe versucht, den Dunkelmodus mithilfe von CSS變量und @media查詢auf meiner Blog-Seite My Shop [1] zu implementieren.

CSS-Dunkelmodus

Ich habe Variablen definiert, um die Farben Ihres Designs festzulegen, und ich empfehle Ihnen, dasselbe zu tun, da es den Vorgang erheblich vereinfacht. Meine Standardfarbvariablen sind wie folgt:

:Wurzel {
  --Akzent: #226997;
  --Haupt: #333;
  --Licht: #666;
  --Feuerzeug: #f3f3f3;
  --Rand: #e6e6e6;
  --bg:#ffffff;
}

Wenn Sie diese Variablen in Ihrem Stylesheet verwenden möchten, können Sie dies wie folgt tun:

P {
  Farbe: var(--main);
}

Wenn Sie also die Farben Ihres Designs ändern möchten, müssen Sie nur die definierte Variable ändern und alles, was diese Variable verwendet, wird aktualisiert.

Jetzt müssen wir einen neuen Satz Variablen definieren, die beim Aufrufen des CSS-Dunkelmodus verwendet werden.

/* Definiere die Farbe des Dunkelmodus */
:Wurzel {
  --Akzent: #3493d1;
  --main: #f3f3f3;
  --Licht: #ececec;
  --Feuerzeug: #666;
  --Rand: #e6e6e6;
  --bg: #333333;
}

Dark-Unterstützung hinzugefügt

Nachdem wir nun zwei Variablensätze definiert haben, müssen wir nur noch preferences -color-scheme zu unserer dark Variable hinzufügen.

Nehmen Sie die Farbvariable „Dunkel“ und fügen Sie die folgende @media 查詢hinzu:

/* Definiere die Farbe des Dunkelmodus */
@media (bevorzugtes Farbschema: dunkel) {
  :Wurzel {
    --Akzent: #3493d1;
    --main: #f3f3f3;
    --Licht: #ececec;
    --Feuerzeug: #666;
    --Rand: #e6e6e6;
    --bg: #333333;
  }
}

Das ist es! Wenn jemand ein dunkles Betriebssystemdesign verwendet und Ihre Website besucht, wechselt Ihre Website jetzt automatisch in den Dunkelmodus.

Sie möchten sicher testen, ob diese Änderung funktioniert. Dazu können Sie einfach ein dunkles Design auf Ihrem Betriebssystem aktivieren, beispielsweise das dunkle Design von iOS.

Wenn Sie keine Zeit mit der Thematisierung Ihres Betriebssystems verschwenden möchten, können Sie diesen Test alternativ in Firefox erzwingen. So geht's:

Öffnen Sie Firefox, geben Sie about:config in die Adressleiste ein und drücken Sie die Eingabetaste.

Sie werden aufgefordert, das Risiko einzugehen und es zu akzeptieren.

Suchen Sie in der Suchleiste nach ui.systemUsesDarkTheme . Ändern Sie das Kontrollkästchen in number und klicken Sie auf das + -Zeichen. Ändern Sie den Wert auf 1 und klicken Sie auf die Schaltfläche mit dem Häkchen.

Die Seite sollte jetzt schwarz sein.

Gehen Sie zurück zu Ihrer Website und das Design sollte automatisch auf den Dunkelmodus aktualisiert worden sein.

Wenn Sie testen möchten, ob es zurückschaltet, ändern Sie den Wert auf 0 .

Wenn Sie mit dem Testen fertig sind, klicken Sie auf den Papierkorb, um die Option zu löschen.

Damit ist dieser Artikel über Beispielcode zur Implementierung des Dunkelmodus mit CSS-Variablen abgeschlossen. Weitere relevante CSS-Inhalte zum Dunkelmodus finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!