WordPress Theme Switcher

5
(1)

Im Beitrag HTML Theme Switcher stellte ich ein funktionierendes Script von einem Benutzer einer anderen Seite in überarbeiteter Form zur Verfügung. Standardmäßig wird zum Beispiel diese Seite überwiegend in hell dargestellt, aber nicht jeder mag oder kann das helle Licht nicht so gut ab, von daher habe ich von dem erwähnten HTML Theme Switcher eine soweit funktionierende Variante erstellen können.

Verwendete Sachen

In diesem Beispiel werden für die Umsetzung folgende Sachen verwendet.

Schalter per Widget hinzufügen

Damit überhaupt umgeschaltet werden kann, wird unter Design > Widget > HTML > Individuelles HTML der folgende Code hinzugefügt.

<label id="switch" class="switch">
<input type="checkbox" onchange="toggleTheme()" id="slider">
<span class="slider round"></span>
</label>

JavaScript hinzufügen

Der folgende Code wird zur Vereinfachung in CM Header & Footer Script Loader als JavaScript hinzugefügt.

  • Script Type: JS
  • Script Location: Footer Script
  • Autoload Option: Load by default on All Posts and Pages
// function to set a given theme/color-scheme
      function setTheme(themeName) {
        localStorage.setItem('theme', themeName);
        document.documentElement.className = themeName;
      }
      
      // function to toggle between light and dark theme
      function toggleTheme() {
        if (localStorage.getItem('theme') === 'theme-dark') {
          setTheme('theme-light');
        } else {
          setTheme('theme-dark');
        }
      }
      
      // Immediately invoked function to set the theme on initial load
      (function () {
        if (localStorage.getItem('theme') === 'theme-dark') {
          setTheme('theme-dark');
          document.getElementById('slider').checked = false;
        } else {
          setTheme('theme-light');
          document.getElementById('slider').checked = true;
        }
      })();

CSS hinzufügen

Der folgende Code wird zur Vereinfachung in CM Header & Footer Script Loader als CSS hinzugefügt.

  • Script Type: CSS
  • Script Location: Header Script
  • Autoload Option: Load by default on All Posts and Pages
.theme-light {
--filter-invert:92%;
}
.theme-dark {
--filter-invert:0%;
}
body,#footer-widgets,img,.site-info,#header-section,#wpadminbar,pre{
filter: invert( var(--filter-invert));
}
 /* The switch - the box around the slider */
      .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
      }
      /* Hide default HTML checkbox */
      .switch input {
      opacity: 0;
      width: 0;
      height: 0;
      }
      /* The 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('slider-dark.svg');
      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('slider-light.svg');
      background-repeat: no-repeat;
      background-position: center;
      }
      /* Rounded sliders */
      .slider.round {
      border-radius: 34px;
      }
      .slider.round:before {
      border-radius: 50%;
      }

Grafiken

Momentan gibt es noch kleine Schönheitsfehler wie es bei der Grafik noch der Fall ist. Dies wird noch behoben 😉

Hell
Dunkel
Invertiert

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 5 / 5. Anzahl Bewertungen: 1

Bisher keine Bewertungen! Sei der Erste, der diesen Beitrag bewertet.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.