Hallo, Besucher der Thread wurde 1,5k aufgerufen und enthält 37 Antworten

letzter Beitrag von Belarus am

[Template] Dark- / Light-Mode Switcher

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,


    wie viele sicher schon auf einigen Webseiten gesehen haben, bieten diese einen sogenannten Dark-Mode an. Dieser Dark-Mode ermöglicht es den Benutzern und Gästen, auf einfache Art und Weise, zwischen einen hellen und dunklen Hintergrund zu wechseln. Der Hintergrund für eine solche Option obliegt daran, dass wenn Benutzer und Gäste Deine Seite in der Dunkelheit betrachten, diese entsprechend im Dark-Mode (also mit dunklem Hintergrund) betrachten und damit Ihre Augen vor dem sonst so hellem Hintergrund schonen können ;)


    Features

    • Dark-/Light Mode Switcher
    • Ohne Seitenreload (neuladen der Seite)
    • Direkt im Hauptmenü Deines Styles
    • Ohne erstellen neuer Styles
    • Individuell anpassbar




    Demo


    Eine Live Demo in der WCS ist leider nicht vorhanden. Allerdings ist ein Codebeispiel vorhanden: Codepen.io: Dark-/Light Mode Switcher ;)


    Das unachtsame (ver)ändern von Templates kann zu einem Fatal-Error führen. Es wird daher dringend dazu geraten vorher ein Backup zu machen! Für etwaige Datenverluste oder Schäden kann keine Haftung übernommen werden! Bei Unsicherheiten frag entsprechend besser vorher nach oder wende Dich an einer Person Deines Vertrauens. Danke!

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    <li class="darkmode-switch">
    <label id="switch" class="switch">
    <input type="checkbox" onchange="toggleTheme()" id="slider">
    <span class="slider round"></span>
    </label>
    <!-- <button id="switch" onclick="toggleTheme()">Switch</button> -->
    </li>
    <script>
    function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
    }
    function toggleTheme() {
    if (localStorage.getItem('theme') === 'theme-dark') {
    setTheme('theme-light');
    } else {
    setTheme('theme-dark');
    }
    }
    (function () {
    if (localStorage.getItem('theme') === 'theme-dark') {
    setTheme('theme-dark');
    document.getElementById('slider').checked = false;
    } else {
    setTheme('theme-light');
    document.getElementById('slider').checked = true;
    }
    })();
    </script>
    Alles anzeigen
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    /* Dark-Light Mode - Anpassung zum Hauptmenü */
    .darkmode-switch{
    margin-top: 12px;
    list-style: none !important;
    float: right !important;
    }
    /* Dark-Light Mode - Colors */
    .theme-light .main, .theme-light .content {
    background: #ffffff;
    }
    .theme-light {
    --color-primary: #0060df;
    --color-secondary: #ffffff;
    --color-accent: #fd6f53;
    --font-color: #000000;
    }
    .theme-dark {
    --color-primary: #000000 !important;
    --color-secondary: #000000 !important;
    --color-accent: #12cdea !important;
    --font-color: #ffffff !important;
    }
    .theme-dark .main, .theme-dark .content {
    background: #000000 !important;
    border: 1px solid #000000 !important;
    }
    .main > div, .content > div{
    background: var(--color-secondary);
    }
    .main > div h1, .content > div h1 {
    color: var(--font-color);
    }
    .main > div button, .content > div button {
    color: var(--font-color);
    background: var(--color-primary);
    }
    /* Dark-Light Mode - Switcher */
    .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    }
    .switch input {
    opacity: 0;
    width: 0;
    height: 0;
    }
    /* Dark-Light Mode - Slider */
    .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    }
    .slider:before {
    position: absolute;
    content: "";
    height: 40px;
    width: 40px;
    left: 0px;
    bottom: 4px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    box-shadow: 0 0px 15px #2020203d;
    background: white url('./images/night.png'); /* Pfad ggfls. anpassen! */
    background-repeat: no-repeat;
    background-position: center;
    }
    input:checked + .slider {
    background-color: #2196f3;
    }
    input:focus + .slider {
    box-shadow: 0 0 1px #2196f3;
    }
    input:checked + .slider:before {
    -webkit-transform: translateX(24px);
    -ms-transform: translateX(24px);
    transform: translateX(24px);
    background: white url('./images/sunny.png'); /* Pfad ggfls. anpassen! */
    background-repeat: no-repeat;
    background-position: center;
    }
    .slider.round {
    border-radius: 34px;
    }
    .slider.round:before {
    border-radius: 50%;
    }
    Alles anzeigen

Die unter dem Kommentar "/* Dark-/Light Mode - Colors */" angegebenen Werte müssen entsprechend den eigenen Bedürfnissen angepasst werden. Die im hier dargestellten CSS-Werte dienen ausschließlich nur als Beispiel! Zudem müssten nur die CSS-Deklarationen für den Dark-Mode angepasst werden, insofern bisher ein heller Style genutzt wurde - oder - die CSS-Deklarationen für den Light-Mode angepasst werden, insofern bisher ein dunkler Style genutzt wird. Bei letzteren müssten im JS die Werte theme-dark entsprechend mit theme-light ersetzt werden.


Benutzung

  1. Lade die beiden Grafiken sunny.png (night.png) und night.png (sunny.png) herunter und speicher diese unter images ab.
  2. Gehe zu Anpassung Templates.
  3. Wähle unter Templates (falls dort nicht schon markiert) über den Filter Deinen Style aus.
  4. Lege mit einen klick auf + Template hinzufügen ein neues Template an.
  5. Wähle als Templatename: "DarkModeSwitcher" aus.
  6. Füge dann den HTML-Quellcode (siehe oben) ein und speicher dieses ab.
  7. Gehe zu Anpassung DEIN_STYLE Erweiterte Einstellungen Eigene Deklarationen - oder - Stilunabhängiges CSS und SCSS
    (Hinweis: Benutze "Stilunabhängiges CSS und SCSS" nur wenn der Dark-/Light Mode Switcher in allen Styles eingebunden wird!)
  8. Füge dort den CSS-Quellcode (siehe oben) ein.

Um das Template nun einzubinden und anzeigen zu lassen gehe wie folgt vor:

  1. Gehe zu Anpassungen Templates DEIN_STYLE und suche das Template: pageHeaderUser
  2. Klicke hier auf um das Template zu bearbeiten.
  3. Suche nun nach der Zeile <ul class="userPanelItems"> (relativ weit oben).
  4. Füge danach folgendes in einer neuen Zeile ein: {include file='DarkModeSwitcher'} und speicher dieses ab.
  5. Fertig!

Weitere Informationen


Im übrigen harmoniert die Top-Bar sehr schön mit den Erweiterten Menü und dem TopBarMenu ;)

Lizenz

Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)

Screenshots

  



Viel Spaß damit ;)


Gruss,

Andreas