Auf der Suche nach einer einfachen Möglichkeit einen DarkMode in mein WordPress-Theme einzubauen, bin ich auf 2 Möglichkeiten gestoßen.
Es gibt ein Plugin, dass alles für einen macht (braucht aber Ladezeit und Ressourcen), oder eine sehr einfachen DarkMode via CSS – auf Basis von @media (prefers-color-scheme: dark).
Das Plugin ist für alle neueren WordPress-Versionen geeignet:
Das Plugin fügt der Seite noch einen Schalter hinzu, mit dem man den DarkMode an- und ausschalten kann.
Ich habe mich für die einfache Variante entschieden, da ich mein Theme einfach halten wollte und diesen Schalter nicht brauche, da die meisten Handys und Desktop-Systeme über die Möglichkeit verfügen, einen globalen DarkMode zu aktivieren.
Der folgenden Code wir im Customizer unter “Custom CSS” eingefügt und das war es eigentlich schon. Evtl. müssen je nach Theme an der einen oder anderen Stelle noch Anpassungen gemacht werden, aber vom Prinzip her reicht dieser vollkommen aus.
Einen kleines Problem hat WordPress mit der CSS-Variante. Die AdminBar wird nach unten verschoben, daher der kleine Fix, damit alles wieder gut aussieht. Alle anderen Anpassungen sind in den Code-Kommentaren kurz beschrieben, was diese machen.
/*-----------------------------------------
- Enable DarkMode
-----------------------------------------*/
@media (prefers-color-scheme: dark) {
html {
filter: invert(100%) hue-rotate(180deg);
}
/* Revert Back Images, make them paler */
img {
filter: invert(80%) hue-rotate(180deg);
}
/* Revert Smileys (if any) use HTML-Editor add span class="smile" and Smiley to insert Smiley */
.smile {
filter: invert(100%) hue-rotate(180deg);
}
/* Revert back WPAdminBar and make it sticky on the top of the page */
#wpadminbar {
position: sticky;
filter: invert(100%) hue-rotate(180deg);
}
/* Revert Back WPAdminBar Avatar*/
#wpadminbar a img {
filter: none;
}
/* Don't invert these images */
.site-logo,
.icon {
filter: none
}
/* Alternate Background Color /*
.site, .primary-navigation-wrap {
background-color: #dddddd;
}
}
/*-----------------------------------------
- Fix Admin Bar
-----------------------------------------*/
html[lang] {
margin-top: 0 !important
} Letztes Update: Di, 10. Okt. 2023
Ursprünglich veröffentlicht: Do, 07. Sep. 2023