Beispielcode zur Implementierung des Dunkelmodus mit CSS-Variablen

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!

<<:  2 Gründe, warum die HTML-CSS-Tag-Stileinstellung nicht funktioniert

>>:  Warum Seconds_Behind_Master immer noch 0 ist, wenn eine MySQL-Synchronisierungsverzögerung auftritt

Artikel empfehlen

Detaillierte Erklärung zur Verwendung von Standard in MySQL

NULL- und NOT NULL-Modifikatoren, DEFAULT-Modifik...

Einführung in die Cloud-native-Technologie Kubernetes (K8S)

Inhaltsverzeichnis 01 Was ist Kubernetes? 02 Der ...

JavaScript generiert dynamisch eine Tabelle mit Zeilenlöschfunktion

In diesem Artikelbeispiel wird der spezifische Co...

So stellen Sie zabbix_agent in Docker bereit

zabbix_agent-Bereitstellung: Empfehlung: zabbix_a...

So installieren Sie Nginx in Docker und konfigurieren den Zugriff über https

1. Laden Sie das neueste Nginx-Docker-Image herun...

Zusammenfassung der vier Möglichkeiten zum Durchlaufen eines Arrays in JS

Dieser Artikel vergleicht und fasst vier Möglichk...

Erste Erfahrungen mit der Texterstellung mit Javascript Three.js

Inhaltsverzeichnis Wirkung Beginnen Sie mit der T...

Häufige Fehler bei der Verwendung von React Hooks

React Hooks ist eine neue Funktion, die in React ...

Ein unverzichtbarer Karriereplan für Webdesigner

Originalartikel, bei Nachdruck bitte Autor und Qu...

Eine kurze Diskussion über das Funktionswissen von Python

Inhaltsverzeichnis Zwei Hauptkategorien von Funkt...