So führen Sie eine sanfte Transformation des Dunkel-/Hellmodus durch

Okay, Sie befinden sich also auf einer Website und sie befindet sich im dunklen Modus. Aber Sie bevorzugen den Lichtmodus (wenn ja, ist das Ihr Vorrecht?). Es ist 3 Uhr morgens. Sie klicken auf den Schalter für den Dunkel-/Hellmodus. Plötzlich ein Blitz! Es kommt zu vorübergehender Blindheit, gefolgt von Tinnitus und einem Krampfanfall. Eine kostspielige Reise in die Notaufnahme später (Danke, US-Gesundheitssystem!) und Sie haben Tausende verloren.

Das war etwas übertrieben, aber der störende Themenwechsel ist unbestreitbar nervig. Lass es uns reparieren! Mit modernstem CSS (okay, vielleicht nicht so) können wir einen reibungslosen Übergang umsetzen. Ich werde den Code und die Erklärung bereitstellen.

Zuerst benötigen Sie einen Theme-Switcher. Schauen Sie sich Diesen Link an, um eine Anleitung zu erhalten, falls Sie noch keine haben. Diese Methode ist mit CSS-Variablen (--color: blue;) und ähnlichen Ansätzen kompatibel.

Hier ist der Code:

* {
  transition-duration: 1s;
}

Stellen Sie 1s (eine Sekunde) auf Ihre bevorzugte Übergangsgeschwindigkeit ein.

Das Sternchen (*) ist ein universeller Selektor, was bedeutet, dass jedes Element auf der Seite betroffen ist. Durch die Einstellung transition-duration weisen wir den Browser an, einen sanften Übergang anzuwenden, wenn sich eine Eigenschaft eines Elements ändert. Ganz einfach!

Danke fürs Lesen!

Andrew McSillyone

Das obige ist der detaillierte Inhalt vonSo führen Sie eine sanfte Transformation des Dunkel-/Hellmodus durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!