CSS: Einfacher Dunkelmodus

Ein dunkler Modus ist eine Anzeigeoption, die das Farbthema einer Website oder Anwendung von einem hellen Hintergrund (mit dunklem Text) auf einen dunklen Hintergrund (mit hellem Text) umschaltet. Dieser Modus erfreut sich zunehmender Beliebtheit, da er die Belastung der Augen in Umgebungen mit wenig Licht reduziert, Energie bei Geräten mit OLED-Bildschirmen spart und eine optisch ansprechende Alternative zu herkömmlichen Lichtthemen bietet.
Normalerweise können Sie zwischen drei Modi umschalten: dunkel, hell und Systemdesign-Einstellung.

Alter Weg

Bisher haben wir die CSS-Medienfunktion „preferences-color-scheme“ verwendet:

Die CSS-Medienfunktion „Preferes-Color-Schema“ wird verwendet, um zu erkennen, ob ein Benutzer helle oder dunkle Farbthemen angefordert hat. Ein Benutzer gibt seine Präferenz über eine Betriebssystemeinstellung (z. B. heller oder dunkler Modus) oder eine Benutzeragenteneinstellung an.

@media (prefers-color-scheme: dark) {
  .post {
    background: #753;
    color: #dcb;
  }
}

@media (prefers-color-scheme: light) {
  .post {
    background: #bcd;
    color: #334;
  }
}

Wie Sie sehen können, müssen wir zwei Themen pflegen, eines für jeden Modus.
Es kann schwierig sein, diesen Ansatz in einer groß angelegten Anwendung anzuwenden.

Neuer und besserer Weg

Glücklicherweise hat CSS eine neue Eigenschaft eingeführt, die uns das Leben einfacher macht, light-dark(), und sie wird von allen gängigen Browsern unterstützt:

Die CSS-Funktion „light-dark()“ ermöglicht das Festlegen von zwei Farben für eine Eigenschaft. Sie gibt eine der beiden Farboptionen zurück, indem sie erkennt, ob der Entwickler ein helles oder dunkles Farbschema festgelegt hat oder der Benutzer ein helles oder dunkles Farbschema angefordert hat. ohne dass die Themenfarben in eine Medienfunktionsabfrage „Preferences-Color-Schema“ eingeschlossen werden müssen.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#292524, #f5f5f4);
  background-color: light-dark(#f5f5f4, #292524);
}

Verwenden Sie einfach die Eigenschaft „light-dark()“ für jedes Element, das zwischen den Modi umgeschaltet werden soll, fertig!

Das obige ist der detaillierte Inhalt vonCSS: Einfacher Dunkelmodus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!