Contao-Camp 2024
Ergebnis 1 bis 2 von 2

Thema: Dark Mode für Contao

  1. #1
    Contao-Nutzer Avatar von WebMarco
    Registriert seit
    29.09.2014.
    Beiträge
    107

    Standard 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
    light.png
    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":
    dark.png

    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!

  2. #2
    Contao-Nutzer Avatar von WebMarco
    Registriert seit
    29.09.2014.
    Beiträge
    107

    Standard

    Zitat Zitat von WebMarco Beitrag anzeigen
    So ganz glücklich scheint mir mein Ansatz noch nicht. Wenn nicht sogar gänzlich falsch.
    Mir gefällt dieser Ansatz sehr gut: https://gist.github.com/djpogo/dab12...3a5b9f3872f5d7 (Quelle: https://raoulkramer.de/css-dark-mode...ode-rethought/)

    Nur gefällt mir die Abfrage in dem Skript nicht und es fehlt der Toggle. Ich habe jetzt auch schon Anpassungen durchgeführt, die in der Quelle oben angegeben wurden:

    why html element?

    We want to set the chosen theme, as soon as possible. In <head> context, the <body> element is not yet available. By manipulating the <html> element from the <head> element, the user will instantly get the theme he chosed, without a flash of the other theme.
    Also habe ich mein Skript angepasst:
    statt document.body.removeAttribute('data-theme'); besser document.documentElement.removeAttribute('data-theme');

    Sieht dann wie folgt aus:
    HTML-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.documentElement.setAttribute('data-theme', 'dark') :
        document.documentElement.removeAttribute('data-theme');
    }
    
    function resetTheme() {
      if (darkSwitch.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('darkSwitch', 'dark');
      } else {
        document.documentElement.removeAttribute('data-theme');
        localStorage.removeItem('darkSwitch');
      }
    }
    </script>
    Doch bleibt das angesprochene Flackern immer noch. Bei der Lösung von raoulkramer.de taucht kein solches Flackern auf, wenn der Dark Mode aktiviert ist. Hat jemand eine Idee?

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •