Liste der Anhänge anzeigen (Anzahl: 2)
Dark Mode für Contao
Liebe Community,
ich greife meine Fragestellung aus diesem Thema auf: Erweiterung zum Manager hinzufügen - Dark Mode für das Backend
Dort wurde ein Dark Mode mittels Style-Switcher umgesetzt. Gerne möchte ich einen "echten" Dark Mode in Kombination mit einem Switcher für das Frontend umsetzen. Also, wenn ein Besucher in seinen System-Einstellungen den Dark Mode aktiviert hat, soll die Webseite automatisch im dunklen Layout angezeigt werden. Dabei soll dieser jedoch auch die Möglichkeit haben, die Seite im Tagmodus anzuschauen. Umgekehrt sollen alle anderen Besucher in den dunklen Modus der Webseite wechseln können.
Diese Einstellungen sollen dabei gespeichert werden. In meiner bisherigen Lösung klappt es mit den Standard-Einstellungen des Dark Modus nicht, da diese nicht als
HTML-Code:
@media (prefers-color-scheme: dark) {}
umgesetzt wurden.
Weiter flackert nach dem Toggle die Seite immer kurz in den Tagmodus, wenn diese gewechsel bzw. neu geladen wird. Das localStorage ist wohl zu langsam?
Meine Lösung bisher:
Auf der Webseite ist ein Toggler eingebunden
Anhang 24186
HTML-Code:
<div class="switch_dark">
<label class="switch" for="darkSwitch">
<input id="darkSwitch" type="checkbox">
<span class="slider"></span>
</label>
<p>Dark Mode</p>
</div>
jQuery:
Code:
<script>
const darkSwitch = document.getElementById('darkSwitch');
window.addEventListener('load', () => {
if (darkSwitch) {
initTheme();
darkSwitch.addEventListener('change', () => {
resetTheme();
});
}
});
function initTheme() {
const darkThemeSelected =
localStorage.getItem('darkSwitch') !== null &&
localStorage.getItem('darkSwitch') === 'dark';
darkSwitch.checked = darkThemeSelected;
darkThemeSelected ? document.body.setAttribute('data-theme', 'dark') :
document.body.removeAttribute('data-theme');
}
function resetTheme() {
if (darkSwitch.checked) {
document.body.setAttribute('data-theme', 'dark');
localStorage.setItem('darkSwitch', 'dark');
} else {
document.body.removeAttribute('data-theme');
localStorage.removeItem('darkSwitch');
}
}
</script>
In der CSS sind die dunklen Änderungen wie folgt immer angegeben:
HTML-Code:
[data-theme="dark"] ID oder Klasse
hier wird der Standardwert überschrieben.
Beim Klick auf den Toggler schaltet dieser in den "Dark Mode":
Anhang 24187
So ganz glücklich scheint mir mein Ansatz noch nicht. Wenn nicht sogar gänzlich falsch. Diese Anleitung https://www.youtube.com/watch?v=E_dBqPP9MxI führte mich leider auch nicht weiter. Es wird ja trotzdem wieder über eine Body-Klasse gearbeitet. Wie bei allen Anleitungen im Internet, die ich gefunden habe.
Hat vielleicht jemand eine Idee? Ich wünsche an dieser Stelle noch einmal allen ein frohes neues Jahr. Bleibt gesund und munter!
