Dark/Light Mode mit Speicherung?

Hallo

ich möchte gerne einen einfach Dark/Light Mode einbauen, dazu habe ich 2 css Dateien. Da funktioniert so weit mal, aber es soll auch gespeichert werden, dass es auch auf jeder Unterseite und auch bei Refresh automatisch den Mode angezeigt wird, denn man hatte.

Hier der Code: https://github.com/AlexanderWagnerDev/light-dark-mode-css-js

Gruß

AGW

Answer 1

[regex9]

Du speicherst die Einstellung derzeit im Local Storage, aber nutzt diesen Wert derzeit noch nicht wirklich. Dabei sollte er der tatsächliche Orientierungswert sein.

const theme = document.getElementById("theme-mode");

function switchMode() {
  if (localStorage.getItem("theme") === "light") {
    theme.href = "css/stylesheet-dark.css";
    localStorage.setItem("theme", "dark");
  }
  else {
    theme.href = "css/stylesheet.css";
    localStorage.setItem("theme", "light");
  }
}          

const btn = document.querySelector(".bl-toggle");
btn.addEventListener("click", switchMode);

switchMode();

Der Standard wäre hierbei stets der Light Mode. Wenn der Nutzer zum allerersten Mal auf die Webseite kommt, existiert noch kein Key im Storage und die Prüfung läuft folgendermaßen in den else-Zweig hinein.

Noch anzumerken wäre, dass diese Einstellung nur im Browser gespeichert wird. Das heißt, ein Nutzer müsste diese Einstellung für jedes Gerät (Desktop-PC, Handy, ...), auf dem er die Seite betrachten möchte, die Einstellung neu setzen. Für eine geräteübergreifende Konfiguration müsste der Wert zentral (bspw. auf dem Webserver selbst) gespeichert werden und er müsste assoziierbar zum Nutzer sein (Stichwort: Profil/Nutzerauthentifizierung).

PS.: Dein HTML-Dokument ist invalid. Es gibt eine grundsätzliche Aufteilung in head und body. Jeglicher Seiteninhalt (in deinem Fall header und footer) gehört in den body. Innerhalb dieses Bereichs kannst du deinen Seiteninhalt noch einmal logisch aufteilen (header, footer, main, etc.).