Webseiten Nachtdesign realisieren - CSS & Javascript

Webseiten Nachtdesign realisieren - CSS & Javascript

Nachtdesign erstellen

Für devindie.de hab ich ein zusätzliches Design realisiert, ein Nachtdesign. In dieser ist der Hintergrund schwarz, die Schriftfarbe weiß und einige Elemente verdunkelt.

Ziemlich elegant, oder?

Persönlich gefällt mir allerdings die helle Version besser, aber das ist wohl Geschmackssache. Darum soll es jetzt aber auch nicht gehen, sondern um die Frage: Wie implementiert man schnell und einfach eine dunkle Version seines fertigen Designs?

Es werde Dunkel!

Sobald man einen Nachtmodus Button auf seiner Webseite positioniert hat, über welchen man das Nachtdesign aktivieren soll, muss nur noch folgender Javascript Code hinzugefügt werden.

// Stylesheet im <head> Bereich ganz am Ende hinzufügen
function addCSS(fileName)
{
var link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.id = "night";
link.href = fileName;
document.head.appendChild(link);
}

if(document.cookie.indexOf("night=") != -1)
{
addCSS("/style/night.css");
}

function night()
{
if(document.getElementById("night") == null)
{
addCSS("/style/night.css");

// Cookie erstellen
var d = new Date;
d.setFullYear(d.getFullYear() +10);
document.cookie = "night=1; expires="+d.toGMTString()+"; path=/"; 
}
else
{
// Stylesheet entfernen, Cookie löschen
var night = document.getElementById("night");
night.parentNode.removeChild(night);
document.cookie = "night=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
}

Jetzt muss nur noch die night() Funktion aufgerufen werden.

Nicht alle Regeln kopieren!

Das Nachtdesign Stylesheet soll nur die relevanten Regeln des hellen Stylesheets überschreiben. Es ist unnötig den gesamten hellen Stylesheet zu kopieren!

body {
    background: #fff;
}

button {
    padding: 20px;
}

div {
    margin: 10px;
    border: 1px solid #000;
}
body {
    background: #000;
}

Fertig ist das Webseiten Nachtdesign, welches dynamisch über Javascript aktiviert wird.

Hinterlasse gerne einen Like oder Kommentar (~‾▿‾)~
Name Text
Kommentare
Ivy Kemp> 3 Mt.ATT: devindie.de / devindie.de - Entwicklung, Spiele, Webseiten, Tutorials INTERNET SITE SERVICES This notice RUNS OUT ON: Oct 22, 2020 We have not gotten a payment from you. We've attempted to call you however were incapable to contact you. Kindly See: https://bit.ly/2ThPExq . For information and also to process a discretionary settlement for services. 10222020191656.