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
Mfg