diedVIPs

html knowhow

Tag- oder Nachtmodus









☾ Dunkel☼ Hell

Tag- und Nachtmodus

Mit dieser Funktion kann der Hintergrund gewechselt werden. Außerdem wird lokal ein Cookie gespeichert.
Beim Laden einer anderen Seite wird diese im ausgewählten Modus "Hell/Dunkel" dargestellt.

Dieses Modul ist entnommen von Werner Zenk
So sieht´s aus
Aus technischen Gründen steht die Funktion oben

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

Quellcode
Weil der Quellcode zu umfangreich ist, habe ich das Paket als .ZIP-Datei zum runterladen angeboten
ZIP-Datei runterladen


Diese Daten z.B. in Ihre "Index.html" eingeben

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>
Quellcode
Weil der Quellcode zu umfangreich ist, habe ich das Paket als .ZIP-Datei zum runterladen angeboten




CSS-Datei: night.css   anlegen

Die CSS-Angaben eventuell der Website anpassen.
Quellcode
html {background-color: #444444;}
body, article {background-color: #000;color: #FFF;}


CSS-Datei: day.css   anlegen

Aus technischen Gründen steht die Funktion oben

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

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



JavaScript-Datei: javascript.js   anlegen

Diese Seite bindet das oben gesetzte Cookie in alle Seiten ein, wo Sie den Farbenwechsler haben wollen. Unten sehen sie, wie man ihn in die Seiten einbaut.
Quellcode
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);
}

});



javascript.js einbinden

Dieses Script in den Head aller Seiten einbinden, wo Sie den Farbenwechsler integrieren wollen.
Also auch in Ihrer Index.html Seite.
Meta
<script src="javascript.js"></script>






Kontakt    Datenschutz    Impressum