Hallo, Besucher der Thread wurde 2,3k 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.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    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

    Update:
    Der Code wurde soeben im ersten Beitrag so angepasst, dass der Dark-/Light Mode Switcher nun direkt links neben den UserMenu angezeigt wird.

    Guten Morgen,


    ich habe den Switcher eingebaut, jedoch werden die sunny und night Bilder nicht angezeigt, diese liegen im unterverzeichnis /cms/images/ wo der Core installiert ist. Sind die da richtig?


    Danke im Voraus.


    MfG


    Edit: Ich hätt wohl vorher den Bildpfad im Template anpassen müssen, funktioniert nun.

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

    Dieses Thema enthält 35 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.
  • Dieses Thema enthält 35 weitere Beiträge, die nur für registrierte Benutzer sichtbar sind, bitte registriere dich oder melde dich an um diese lesen zu können.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!