Ändern Sie das Hell- und Dunkel-Design in nur wenigen Zeilen JavaScript

Okay. Es ist ein bisschen CSS dabei, aber es war viel einfacher als die Antworten, die ich im Internet gefunden habe.

Was ich erreichen möchte?
Ich versuche mit dieser Methode zwei Dinge zu erreichen.

1. Ich muss zulassen, dass die Website so geladen wird, wie es der Benutzer bevorzugt (der Teil, in dem er sein Thema bereits im Betriebssystem ausgewählt hat)
2. Aber ich möchte ihnen auch erlauben, nach dem Laden zwischen Dunkel- und Hellmodus umzuschalten.

Wir werden also eine Website haben, die das vom Benutzer erwartete Design lädt und es ihm dann ermöglicht, es zu ändern, wenn er möchte.

Schritt 1: Schaltfläche zum Umschalten erstellen

<img class="mode" src="./img/moon.svg">

Ich verwende als Schaltfläche ein Bild mit einem SVG-Bild eines Mondes. Sie können eine Schaltfläche oder ein Kontrollkästchen hinzufügen, mit dem Sie zwischen zwei Optionen wechseln können.

Schritt 2: Geben Sie Ihre Farbdetails als benutzerdefinierte Eigenschaften in CSS ein

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

Okay.. Im Stammverzeichnis sehen Sie also eine Eigenschaft namens Farbschema, und das wird unser Game Changer sein.
Wie Sie sehen können, werden die Werte Hell und Dunkel angenommen. Ich habe auch zwei Klassen erstellt, .light und .dark, die den Wert des Farbschemas auf dunkel oder hell setzen.

Schritt 3: Fügen Sie Farben zu verschiedenen Teilen Ihres Codes hinzu

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

Wenn eine Eigenschaft nun nach einer Farbe fragt (z. B. Hintergrund, Farbeigenschaften), können Sie die Funktion „hell-dunkel()“ verwenden.
Diese Funktion nimmt zwei Werte an, der erste wird verwendet, wenn das Farbschema auf hell eingestellt ist, und der zweite wird verwendet, wenn das Farbschema auf dunkel eingestellt ist.

Ja... Dies ist eine Funktion, die im Mai 2024 veröffentlicht wird. Sie ist ziemlich neu, wird aber bald angepasst. Und zum Zeitpunkt des Schreibens dieses Artikels befindet es sich in der Grundunterstützung. Hier sind die Dokumente dazu

light-dark() - CSS: Cascading Style Sheets | MDN

Das light-dark() CSS Die Funktion 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 Farbthema angefordert hat, ohne dass die Themenfarben in eine Präferenz eingeschlossen werden müssen -Farbschema-Medienfunktionsabfrage. Benutzer können ihre bevorzugten Farbschemata über ihre Betriebssystemeinstellungen (z. B. Hell- oder Dunkelmodus) oder ihre Benutzeragenteneinstellungen angeben. Die Funktion light-dark() ermöglicht die Bereitstellung von zwei Farbwerten, wobei jede Wert wird akzeptiert. Die CSS-Farbfunktion light-dark() gibt den ersten Wert zurück, wenn die Präferenz des Benutzers auf hell eingestellt ist oder wenn keine Präferenz festgelegt ist, und den zweiten Wert, wenn die Präferenz des Benutzers auf dunkel eingestellt ist.

Developer.mozilla.org

Wenn Sie dies verwenden, erkennt das CSS automatisch die Benutzereinstellungen des Betriebssystems und stellt sie auf die gewünschte Farbe ein.
Wir haben unser erstes Ziel erreicht: Die Website wird mit dem vom Benutzer bereits gewünschten Farbmodus in seinem Betriebssystem geladen.

Schritt 4: Verwenden Sie Javascript, um zwischen dunklem und hellem Modus umzuschalten

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

Hier bezieht sich document.documentElement.style.colorScheme tatsächlich auf das :root-Element aus CSS.
Da es uns bereits im vorherigen Schritt gelungen ist, die Website im vom Benutzer bevorzugten Modus zu öffnen, werden hier beim Klicken auf die Umschalttaste die folgenden Aufgaben ausgeführt.

1. Es prüft, ob das Farbschema einen Wert hat. Wenn nicht, befindet sich die Website im vom Benutzer bevorzugten Modus. Wir müssen feststellen, ob es dunkel oder hell ist, um den Modus zu ändern.
2. Es verwendet window.matchMedia("(prefers-color-scheme:dark)").matches, um herauszufinden, ob es sich im dunklen Modus befindet. Wenn es sich im dunklen Modus befindet, ändern wir das Farbschema in hell, andernfalls ändern wir das Farbschema in hell , wir ändern es auf dunkel.
3. Wenn sie das nächste Mal auf die Schaltfläche klicken, haben wir bereits den Wert für unser Farbschema festgelegt, also wechseln wir einfach zwischen dunkel und hell.

*PS: * Dies ist mein erster Beitrag und ich bin noch ein Anfänger in der Webentwicklung. Aber als ich nach dieser Methode suchte, habe ich keine entsprechenden Beiträge dazu gesehen. Wenn Sie das bereits wissen, tut es mir leid, dass ich Sie mit Klicks anlocke? Ich dachte, dieser Beitrag wird mir helfen, mich jedes Mal an diesen Prozess zu erinnern, wenn ich an einem neuen Projekt arbeite.
Wenn Sie daran arbeiten, dass Ihre Website in alten Browsern funktioniert, ist diese Methode definitiv nichts für Sie. Sag es mir in den Kommentaren zu diesem Beitrag. Danke fürs Lesen.

Das obige ist der detaillierte Inhalt vonÄndern Sie das Hell- und Dunkel-Design in nur wenigen Zeilen JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!