Verwenden Sie CSS, um zwischen dem Dunkelmodus und dem Hellmodus zu wechseln

In der fünften Ausgabe von Web Skills wird ausdrücklich eine technische Lösung zur Implementierung des Dunkelmodus und des Hervorhebungsmodus mit CSS erwähnt. Das heißt, verwenden Sie zum Umschalten die neue Medienabfragebedingung prefers-color-scheme value dark und light . Dies ist die einfachste und nativste Lösung. Darüber hinaus kann sie auch durch das CSS-Attribut „Mixed Mode“ simuliert werden. Natürlich gibt es neben den im Journal genannten technischen Lösungen noch weitere Lösungsansätze. Heute lernen wir, wie man zwischen dem Dunkelmodus und dem Hervorhebungsmodus wechselt.

Was sind Dunkelmodus und Hellmodus

Bevor wir über technische Lösungen sprechen, wollen wir zunächst kurz klären, was der Dunkelmodus und der Hervorhebungsmodus sind. Diese beiden Konzepte stammen aus dem macOS-System, das den Benutzern zwei Design-Skins zur Verfügung stellt, nämlich helle und dunkle Skins. Seit Einführung dieses Konzepts haben viele Websites den Benutzern zwei Sets mit Hautfarben zur Verfügung gestellt, sodass sie ganz einfach je nach ihren Gewohnheiten oder Vorlieben zwischen ihnen wechseln können.

Ob Dunkelmodus oder Hervorhebungsmodus, es ist ein Wechsel zwischen Schwarz und Weiß. Dieser Designstil ist sehr benutzerfreundlich für Benutzer mit Farbenblindheit.

Ähnliche Funktionen finden sich auch in anderen Systemen bzw. Softwares, der Unterschied liegt in den bereitgestellten Modi. In einigen Programmen stehen den Benutzern möglicherweise Funktionen zur Skin-Anpassung zur Verfügung. Natürlich gibt es ähnliche Funktionen auf Websites, aber in der Vergangenheit haben wir diese Funktion vielleicht lieber als Website-Skins bezeichnet.

In diesem Sinne können wir den Wechsel zwischen diesen beiden Modi als einen Skin-Wechsel bezeichnen, der für unsere Geschäftsszenarien möglicherweise besser geeignet ist. Lassen Sie uns als Nächstes über die technischen Aspekte sprechen, d. h. wie Sie mit CSS den Themenwechsel von Webseiten oder Anwendungen durchführen!

Einfachster Modus

Vorausgesetzt, Ihr Design ist standardmäßig im Hervorhebungsmodus, können wir den einfachsten und brutalsten Weg verwenden, um den Hervorhebungsmodus in den Dunkelmodus umzuschalten. Angenommen, es gibt einen Eintrag auf der Webseite und wenn der Benutzer auf diese button klickt, wird html Element der Name einer dark-theme -Klasse hinzugefügt:

document.getElementById('buttonID').addEventListener('klicken', function(){
    document.documentElement.classList.add('dunkles Design')
})

Fügen Sie .dark-theme und allen seinen untergeordneten Elementen dunkle Stile hinzu:

.dunkles Thema {
    Hintergrundfarbe: #000;
    Farbe: weiß;
}

.dark-theme *:nicht(a) {
    Hintergrundfarbe: #000 !wichtig;
    Farbe: #fff !wichtig;
    Rahmenfarbe: #999 !wichtig;
} 

Obwohl diese Methode einfach und grob ist, erfordern einige Details eine zusätzliche Verarbeitung, insbesondere wenn der Code auch !important Stile verwendet, wird es problematischer. Darüber hinaus kann bei anderen Farbelementen eine zusätzliche Verarbeitung erforderlich sein.

Bereiten Sie zwei Sätze von Stilen vor

Meiner persönlichen Meinung nach bestand die erste Möglichkeit, ähnliche Effekte zu erzielen, im Allgemeinen darin, JavaScript zu verwenden, um die .css Datei des Designs der Webseite oder der Webanwendung zu ändern:

Wie in der obigen Abbildung gezeigt, werden zwei CSS-Dateien bereitgestellt, eine ist theme1.css und die andere ist theme2.css . Gleichzeitig wird ein vom Benutzer umschaltbarer Eingang bereitgestellt. Wenn der Benutzer das entsprechende Design auswählt, wechselt die Webseite oder Webanwendung zur entsprechenden .css , sodass der entsprechende Design-Skin-Farbeffekt angezeigt wird.

Angenommen, der Standarddesignstil der Webseite ist theme1.css :

<link Typ="text/css" rel="stylesheet" Medien="alle" href="../theme1.css" id="theme_css" />

Stellen Sie im Code eine einfache Skriptfunktion bereit:

document.getElementById('buttonID').addEventListener('klicken', function(){
    document.getElementById('theme_css').href = '../theme2.css';
})

Zurück zu unserem Thema: Wenn Sie zwischen dem Dunkelmodus und dem Hellmodus wechseln müssen, können Sie einem ähnlichen Prinzip folgen und jeweils dark.css und light.css bereitstellen.

Die Pflege mehrerer Stilsätze ist mühsam, insbesondere wenn Sie mehrere Skins für Ihr Produkt bereitstellen möchten. Zu diesem Zeitpunkt können Sie einen Prozessor wie Sass verwenden, um Ihren Themenstil beizubehalten, Variablen zu deklarieren und dann die entsprechenden Variablenwerte beizubehalten. Beispielsweise werden beim Erstellen des Bootstrap-Themas Sass-Variablen verwendet:

Das Wissen über die Verwaltung mehrerer Skins mit Sass geht über den Rahmen dieses Artikels hinaus. Wenn Sie an diesem Wissen interessiert sind, können Sie die folgenden Artikel lesen:

Organisieren mehrerer Themenstile mit Sass

Zusammenfassen

Oben habe ich Ihnen die Verwendung von CSS zum Wechseln zwischen Dunkelmodus und Hervorhebungsmodus vorgestellt. Ich hoffe, es wird Ihnen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten!