Darkmode soll beim Seitenwechsel aktiviert bleiben 
Autor: J. M. B.Liebe Community
Ich habe auf einer meiner Websites eine Art Darkmode integriert, der über einen (mit WebAnimator 4 erstellten) Button an- und ausgeschaltet werden kann. Das funktioniert soweit auch gut, nur dass die Abdunklung bei jedem Seitenwechsel wieder deaktiviert wird, was natürlich nicht Sinn und Zweck der Sache ist.
Hier die verwendeten Codeschnipsel für den Darkmode:
Button
< div id="dKCvVbYT" class="darken-on" title="Darkmode aktivieren" style="position: relative; height: 100%;">< /div >
Script
jQuery(document).ready(function($) {
$('.darken-on').click( function() {
$('#imSideBarDark').toggleClass('darken1'),
$('#imContentGraphics').toggleClass('darken2');
});
});
CSS
.darken1 {
background-color: rgba(0, 0, 0, 0.6)!important;
background-position: center top;
background-attachment fixed;
background-repeat: no-repeat;
clip-path: inset(0 0 0 37px)!important;
}
.darken2 {
background-color: rgba(0, 0, 0, 0.6)!important;
background-position: center top;
background-attachment fixed;
background-repeat: no-repeat;
clip-path: inset(0 36px 0 0)!important;
}
Meine Frage
Hat einer von euch Code-Flüsterern eine Idee, wie ich den Status des Darkmodes abspeichern kann, sodass er auch beim Aufruf einer neuen Seite erhalten bleibt? Muss dafür ein Cookie gesetzt werden? Und welches Script müsste ich dafür wo in WebSite X5 einfügen?
Ich habe viel recherchiert, bin aber im Grunde nur ein Anwender und komme aktuell nicht weiter.
Einen Testupload der erwähnten Website könnt ihr über den folgenden Link aufrufen: kurzlinks.de/dnn4
Der Darkmode-Button befindet sich oben rechts im Bildschirmträger (zu erkennen am Mondsymbol).
Vielen Dank fürs Mitdenken; ich freue mich über jeden Input.
JMB
Hier muss dann mit Cookies gearbeitet werden, um die Einstellung zu speichern.
Mal Google fragen: code für darkmode auf webseite anzeigen und mit cookie speichern
Das wird ein Beispiel angezeigt mit HTML-, CSS- und Javascript-Code - habe es nicht getestet.
Autor
Danke, Daniel W.! Ich werde die Suchanfrage übernehmen und mein Glück versuchen – auch wenn ich mit vergleichbaren Formulierungen schon dutzendfach experimentiert habe.
Mein Problem ist eben, dass ich es bislang nicht geschafft habe, die vorgeschlagenen Scripte korrekt in WebSite X5 einzubetten und zum Laufen zu bringen. Aber ich bleibe natürlich dran (auch wenn ich nicht mehr sehr zuversichtlich bin).
Gute Nacht rundherum!
Normalerweise muss das Javascript am Ende der Codes eingefügt werden.
Und entsprechend der CSS-Code am Anfang.
Hier habe ich einen umfangreichen Code gefunden, der bei Seitenwechsel funktioniert, siehe
>> https://medienmarmela.de/dark-mode-fuer-webseiten/
Und hier die Beispielseite, aus deren Quelltext man sich den ganzen Code kopieren kann, siehe
>> https://medienmarmela.de/wp-content/uploads/2020/09/darkmode.html
.
Meine Testseite und die gemachten Arbeiten:
A) Ich habe den Javascript- und CSS-Code sowie das ...
<metaname="color-scheme" content="dark light">
... aus dem 2. Links oben aus dem Quelltext kopiert und in WebSite X5 eingefügt unter ...
1 Einstellungen > Statistiken und Code / Code eingefügt
... und zwar "Vor dem </HEAD> Tag", damit diese Codes auf allen Seiten vorhanden sind.
B) Diesen Code auf jeder Seite oben in das Objekt "HTML Code" einfügen, siehe
<p class="switchdesc">Dark Mode</p>
<input type="checkbox" id="darkModeSwitch" >
<label for="darkModeSwitch">
<span class="buttonbackground">
<span class="buttonslider"></span>
</span>
</label>
C) Unter "2 Vorlage > Struktur des Templates" den Seitenhintergrund "transparent" gemacht, damit die schwarze bzw. weiße Hintergrundfarbe aus dem CSS-Code des Darkmode sichtbar ist.
D) Jetzt müsste noch dafür gesorgt werden, dass überall die dunkle Hintergrundfarbe und die helle Schriftfarbe im Darkmode sichtbar ist. Ebenso müssten die Menü-Elemente angepasst werden.
.
Hier meine Testseite mit den Punkten A), B) und C), um die Seitenwechsel testen zu können.
>> https://findelinks.de/123test-darkmode/ (Punkt D) wird evtl. später noch gemacht)
PS.: Oft fehlen den Codes von der Google-KI wichtige Teile, so dass gute Websites wichtig sind.
Der Wechsel der Schriftfarbe klappt noch nicht, deshalb habe ich als Kompromiss ein helleres Schwarz für den Text genommen, das bei dunklem wie hellem Hintergrund einigermaßen gut passt.
>> https://findelinks.de/123test-darkmode/food-1.html (Schrift mit hellerem Schwarz)
Ich habe kein Smartphone und die Simulation mit Firefox und Chrome zeigt keine Unterschied an, egal ob Hell- oder Dunkelmodus - vielleicht können die Handybesitzer etwas dazu sagen.
Und vielleicht können Nutzer, die schon Erfahrungen mit dem Darkmode bei ihren Websites haben, ihre Erfahrungen und Tipps hier in der Community teilen. Ich selber bin kein Fan vom Darkmode.
So - die Smartphone-Simulation funktioniert jetzt.
Das Menü-Objekt war im verwendeten Template bei den kleineren Auflösungen außerhalb des Schachbrettmusters und deshalb wurde kein Hamburger Menü angezeigt und die Smartphone-Simulation konnte nicht in den Darkmode wechseln.
Es bleibt noch das Problem, dass die Textfarbe nicht zwischen schwarz und weiß wechselt.