Tag und Nachtmodus für Webseiten (Tutorial)

Wechseln Sie mit CSS und JavaScript zwischen einem dunklen und einem hellen Modus.

Mit dieser Funktion kann in einen anderen Modus umgeschaltet werden. Der Modus wird dann in einem Cookie (per JavaScript-localStorage()) gespeichert. Beim laden einer anderen Seite wird überprüft ob das Cookie gesetzt ist, wenn ja, dann wird die Seite im ausgewählten Modus dargestellt.

Demo

Eine Demo habe ich hier eingebaut und diese kann direkt getestet werden.

☾ Dunkel   ☼ Hell

Beim aktivieren der Funktion wird ein Cookie gesetzt,
dieses speichert den ausgewählten Tag.- und Nachtmodus.

➤ Ein Beispiel finden Sie unter: Auswahl eines Farbdesigns mit Tag und Nachtmodus

1. Tag und Nachtmodus umschalten

Hier die Funktion mit der, der dunkle oder helle Modus eingestellt werden kann.

<style>
span#buttonDunkel {
 letter-spacing: 2px;
 width: 95px;
 padding: 7px;
 color: #FFFFFF;
 background-color: #000000;
 border: Solid 1px #DDDDDD;
 display: Inline-Block;
 text-align: Center;
 cursor: Pointer;
 user-select: None;
 transition: color 0.3s;
}

span#buttonHell {
 letter-spacing: 2px;
 width: 95px;
 padding: 7px;
 color: #000000;
 background-color: #FFFFFF;
 border: Solid 1px #DDDDDD;
 display: Inline-Block;
 text-align: Center;
 user-select: None;
 cursor: Pointer;
 transition: color 0.3s;
}

span#buttonDunkel:hover,
span#buttonHell:hover {
 color: #FFD700;
}
</style>

<p>
<span id="buttonDunkel" onClick="daynight(`night`)">&#9790; Dunkel</span>   
<span id="buttonHell" onClick="daynight(`day`)">&#9788; Hell</span>
</p>

<p>
<small>Beim aktivieren der Funktion wird ein Cookie gesetzt, <br>
dieses speichert den ausgewählten Tag.- und Nachtmodus.</small>
</p>

<script>
function daynight(modus) {
 if (modus == "night") {
  window.localStorage.setItem("modus", "night");
  var cssLocation = "night.css";
 }

 if (modus == "day") {
  window.localStorage.setItem("modus", "day");
  var cssLocation = "day.css";
 }

 var objStyle = document.createElement("style");
 var objText = document.createTextNode("@import url(" + cssLocation + ") screen;");
 objStyle.appendChild(objText);
 document.getElementsByTagName("html")[0].appendChild(objStyle);
}
</script>

2. Externe JavaScript-Datei (javascript.js)

window.addEventListener("DOMContentLoaded", () => {

 // Modus
 if (window.localStorage.getItem("modus")) {
  if (window.localStorage.getItem("modus") == "night") {
   var cssLocation = "night.css";
  }
  if (window.localStorage.getItem("modus") == "day") {
   var cssLocation = "day.css";
  }
  var objStyle = document.createElement("style");
  var objText = document.createTextNode("@import url(" + cssLocation + ") screen;");
  objStyle.appendChild(objText);
  document.getElementsByTagName("html")[0].appendChild(objStyle);
 }

});

3. Externe CSS-Datei: night.css

Die CSS-Angaben eventuell der Website anpassen.

html {
 background-color: #444444;
}

body, article {
 background-color: #000;
 color: #FFF;
}

4. Externe CSS-Datei: day.css

html {
 background-color: #F5F5F5;
}

body, article {
 background-color: #FFF;
 color: #000;
}

Tipps

Bevorzugtes Farbschema darstellen (Hell.- / Dunkelmodus für Webseiten)

In Windows 10 kann der Besucher ein helles oder dunkles Farbschema für den PC einstellen, mit der CSS @media-Regel lässt sich das auch für Webseiten einstellen

Designauswahl - Das Design über einem Link verändern

Mit den hier vorgestellten Lösungen, ermöglichen Sie es Ihren Besuchern, ohne großen Aufwand das Design Ihrer Webseiten selbst zu bestimmen.