JS - @media (prefers-color-scheme: dark) manipulieren

Hallo zusammen,

ich bin ziemlich neu was die Webentwicklung angeht. Bisher habe ich zwar fast alles irgendwann hinbekommen, aber nun stehe ich vor dem Problem, dass ich einen „Darkmode“ einbauen möchte.

Ich scheitere einfach daran, das " @media (prefers-color-scheme: dark) " von light auf dark umzustellen.

dazu habe ich eine Checkbox JA / NEIN eingebaut.

Bei betätigung wird ein Cookie gesetzt, je nach Wert.
Dieses lese ich dann aus und jetzte das Cookie und den Startwert der Checkbox neu (damit es über die Seiten hinweg so bleibt)

Das funktioniert alles, nur leider schaffe ich es nicht, das mediaquery von light auf dark umzuschalten.

Mein Code (sorry falls er euch in den Augen brennt^^)

<script>


    // let x = document.cookie;
    // alert(x);

    window.onload = function ismatch() {

        let cookie_string = document.cookie;
        let cookie_test = cookie_string.search("light");
        

        if (cookie_test >= 0) { 
            document.getElementById('nachtmodus').checked = true;
        } 
            else {  document.getElementById('nachtmodus').checked = false;
                     }
      
    }

    function darkmode(){
        a = document.getElementById('nachtmodus');
        if(a.checked)
        {
            alert(a.checked);
            document.cookie = "style=light; path=/";
            document.getElementById('modustext').innerHTML = "Tag:";       
        } else {
            alert(a.checked);
         document.cookie = "style=dark; path=/";   
         document.getElementById('modustext').innerHTML = "Nacht:"; 
        }
    }



</script>

Habe auch schon versucht das Stylesheet je nach Wert mit JS einzubinden …

Aber es hat alles nichts gebracht.

Der Darkmode kommt erst wenn ich Ihn im System selbst aktiviere.

Für einen Tipp wäre ich sehr dankbar!
ps. alles was ich sonst über das gefunden habe war mir zu hoch :wink:

Mfg

Geholfen hat mir dann das hier:

[MEDIA=youtube]eT_MVOqH5bQ[/MEDIA]

leider ist es offenbar nicht möglich dieses Element zu beeinflussen: (aus dark einfach light oder so machen, das wird offenbar nur über das Betriebssystem gesteuert)

@Media (prefers-color-scheme: dark)

(Wäre wohl zu einfach^^)

Habe nun in CSS folgendes angelegt:

:root steht offenbar für das Standardfarbset des body-Element in CSS.

im HTML →

:root {

–bg-color-body: rgb(255, 255, 255);

–color-font: black;

–color-bg-header: white;

}

.dark_mode {

–bg-color-body: rgb(68, 68, 68);

–color-font: rgb(202, 202, 202);

–color-bg-header: grey;

}

(hier werden alle Farben als Variable gesetzt, so wie ich so dann in den Klassen brauche, einmal Standard 1x Darkmode)

Dann gibt es eine Checkbox … Button was auch immer der den JS Code auslöst:

function darkmode() {
a = document.getElementById(‚nachtmodus‘);
if (a.checked) {
document.body.classList.toggle(„dark_mode“);
} else {
document.body.classList.toggle(„light“);
}

im Grunde ändere ich nur die Farbgebung des Body über die Klasse.

​Dazu benötigt man auch die CSS Variablen --color …

.footer_bg {
background-color: var(–color-bg-header);
}

Also kurz:

  1. Variablen in root und dark anlegen

  2. body mit class versehen

  3. mit Javascript die class beeinflussen, welche dann je nach Variable die Farbe setzt

Danke!

Vielleicht hilft es ja jemandem!