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 dunklem und hellem Modus 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

Ich verwende ein Bild als Schaltfläche mit einem SVG-Bild eines Mondes. Sie können eine Schaltfläche oder ein Kontrollkästchen hinzufügen, die für Sie in Ordnung sind, damit Sie zwischen zwei Optionen wechseln können.

Schritt 2: Fügen 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: Farben zu verschiedenen Teilen Ihres Codes hinzufügen

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

Jetzt können Sie immer dann, wenn eine Eigenschaft nach einer Farbe fragt (wie Hintergrund, Farbeigenschaften), die Funktion „light-dark()“ 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

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 mit bevorzugtem Farbschema eingeschlossen werden müssen. 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 jeder -Wert akzeptiert wird. 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 Farbmodus geladen, den der Benutzer bereits in seinem Betriebssystem wollte.

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, sodass wir einfach zwischen dunkel und hell wechseln können.

*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.