Zuletzt aktualisiert am 13.06.2023 um 10:06 Uhr
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.
- WordPress-Theme: onepress
- WordPress-Theme: CM Header & Footer Script Loader Free Version
- Teil von HTML Theme Switcher (HTML, JavaScript, CSS, Bilder)
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 😉
