Tag/Nacht Modus BZW wechseln zwischen zwei definierbaren Themes

  • Hallo zusammen, und ein Frohes neues Jahr euch allen.

    Ich hätte da eine Frage bezüglich einem "kleinem" Problem auf das ich beim arbeiten an meiner Website gestoßen bin.
    Da ich aus eigener Erfahrung weiß, wie mühselig es sein kann längere zeit im internet beim Lesen zu verbringen, besonders bei Nacht, und die Farben der website Hell sind und standarmäßig mit schwarzer schrift auf weißem Hintergrund, möchte ich in meine Website eine Art "Tag/Nacht" Funktion einbauen.

    Ich habe mir das so vorgestellt, das auf der Website eine art "schalter" irgendwo eingefügt wird - oder zwei "symbole", einer für den Nachtmodus, und der andere für den Tagmodus.
    Und je nachdem welchen ich wähle ändern sich die Farben des themes.
    Allerdings soll der schalter an sich nichts machen, außer zwischen zwei von mir bearbeiteten themes zu wechseln.
    Ich habe es mit einem Plugin versucht der eigentlich ein "Theme Switcher" sein soll. Dazu habe ich eine Kopie des Child themes erstellt, die ich auf meiner Website standardmäßig benutze.
    Dann habe ich die farben der childtheme kopie, die fortan "der nachtmodus" sein sollte per "zusätzliche css deklarationen" im customizer angepasst. Alles schön und gut, aber als ich dann wieder auf den "tages theme" gewechselt habe, wurden die Farbänderungen mit übernommen.
    Dazu kommt noch das das wechseln zwischen den themes per dropdown menü wahlweise über dem header oder unter dem Footer stattfindet.

    Also, um es kurz zu machen, was ich vor habe ist eigentlich ganz simpel.
    Im Header Menu (neben homepage etc) zweimal ein Symbol hinzufügen um einen von zwei Themes zu wählen.
    Allerdings scheitere ich an diesem scheinbar einfachem Problem.

    Beispiel Bilder angehangen.

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Klingt bei dir aber extrem kompliziert.

    ich verwende bei diesem Problem einen STYLE SWITCHER in JavaScript

    mit

    /*!
    * jQuery Cookie Plugin v1.3.1
    * https://github.com/carhartl/jquery-cookie
    *
    * Copyright 2013 Klaus Hartl
    * Released under the MIT license
    */

    schreibe mir die Daten in einen Cookie - wenn nicht vorhanden...

    bei der Auswahl hell/dunkle ändere ich das Logo und füge oder lösche layout-dark.css ein

    Mit offenen Augen träumen

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!