Wie kann man den Dark-Mode Seitenübergreifend machen?

Liebe GuteFrage.net Community,

Wie kann ich dafür sorgen, dass der Dark-Mode aktiviert bleibt, wenn man auf eine Unterseite geht von der Seite? Habe ein wenig JavaScript genutzt, doch ich kenne mich noch nicht so wirklich aus in dem Bereich. Ich hoffe, Ihr könnt es mir erklären. :) Dies ist mein Code:

HTML /Javascript:

<button onclick="myFunction()">Toggle dark mode</button>
            <script>
              function myFunction() {
              var element = document.body;
              element.classList.toggle("dark-mode");
           }
            </script>

Css:

.dark-mode {
  background-image: radial-gradient(#5c5252 2%, transparent 7%),
    radial-gradient(#928f8f 2%, transparent 7%);
  background-color: #16140f;
  background-position: 25px 35px, 50px 50px;
  background-size: 20px 20px; 
}

Eine weitere Frage wäre da noch... Und zwar wie bekomme ich es hin in Boxen die Farbe zu verändern? Bisher verändert sich nur der Hintergrund...

LG

jj

Answer 1

[ChrisCat1, UserMod Light]

Du musst seitenübergreifend abspeichern, dass der Dark-Mode aktiviert wurde und beim Aufruf einer neuen Seite dann nachgucken ob dieser als aktiviert eingetragen ist. Dies geht z.B. mit Cookies.
https://www.w3schools.com/js/js_cookies.asp

Comments

[JoJo2go]

Ich verstehe die Anordnung noch nicht so gut... Wo muss ich diesen Code reinpacken. Ich bin halt noch recht neu in diesem Thema...

[ChrisCat1, UserMod Light]

@JoJo2go

Du könntest z.B. eine weitere Funktion erstellen, welche das entsprechende Code setzt oder löscht und im Anschluss deine aktuelle Funktion zum aktivieren/deaktivieren des Dark-Mode aufruft.

Und deine aktuelle Funktion könnte man so anpassen, dass diese erst prüft ob ein entsprechendes Cookies gesetzt ist und entsprechend dann den Dark-Mode aktiviert.

Drückt man den Button für den Dark-Mode wird die neue Funktion aufgerufen, diese setzt das Cookie im Webbrowser des Nutzers und ruft die Funktion zum aktivieren des Dark-Mode auf. Diese Funktion prüft dann ob das entsprechendes Cookie gesetzt ist und aktiviert den Dark-Mode.

Und beim Aufruf einer Seite wird ebenfalls die Funktion aufgerufen welche prüft ob das entsprechendes Cookie gesetzt ist um den Dark-Mode zu aktivieren.

Answer 2

[tide1109]

Wenn der Dark Mode nicht per Button geändert werden soll, könntest du die CSS Media Queries nutzen. Der Dark Mode richtet sich dann an das Betriebssystem.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Mit der Lösung braucht su kein Javascript für den Dark Mode, bist aber etwas eingeschränkt, wann er genutzt werden sollen.

In einem Berufsschulprojekt habe ich soetwas schon implementiert. In der Kurzfassung haben wir es mit Cookies und jQuery umgesetzt.

Die fertige Umsetzung ist etwas länger und etwas komplizierter geworden. Falls du möchtest, könnte ich sie teilen.

Hier die Funktionen zum Setzen und Lesen vom Cookie:

// Key und Value vom Cookie
function setCookie(cname, cvalue) {
  document.cookie = cname + "=" + cvalue + ";path=/; Secure";
}

// Key rein; Value zurück
function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

Im Cookie könntest du z.B. "isDarkMode" true/false speichern. Beim Ändern setzt du den Cookie und beim Laden der Seite liest du den Wert aus.

Die Farben haben wir dann mit jQuery geändert:

$('.color1').css("color", "Wert für Farbe");
$('.bgColor1').css("background-color", "Wert für Farbe");

Mit jQuery kann man alle Elemente mit einer Klasse bekommen und direkt die CSS Parameter ändern.

Die Klasse color1 hat bei uns dann eine Helle Farbe und eine dunkle Farbe bekommen. Bei der Hintergrundfarbe gab es dann bgColor1 und bgColor2.

Über diesen Weg blieb der Javascript Teil übersichtlich und kurz, während die Farben indirekt im HTML Dokument eingetragen wurden.

jQuery muss im HTML eingebunden werden:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

Beim uns hatten wir eine common.js Datei, wo der Code zum Auslesen/Setzen des Cookies und das Setzen der Farbe war. Der Code war auf allen Seiten gleich, sodass man am Ende einen Ort hat, wo der Code ist. Mit einer Änderung an einem Ort, könnte man es auf allen Seiten anpassen.