Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Anklickt! â Advanced Editor Tools; und NEU! â Classic Widgets
Der Dunkel-Modus fĂŒr Websites erfreut sich immer gröĂerer Beliebtheit. Hierbei wird der Plug-ins oft auf eine Farbgebung mit weiĂer Textfarbe und schwarzem Hintergrund gesetzt. Das kommt oft gar nicht so gut, besser ist andere Farbgebungen wie es manche Plug-ins eben anbieten. Dies der verschiedenheit von Plug-ins ist auch der Kern des Beitrags. Auf lange Sicht kann dies dazu beitragen, die Belastung der Augen zu reduzieren und ein angenehmeres Surferlebnis zu schaffen – insbesondere nachts.
Zum Dunkel-Modus-Website
Der Button zum Switch ist in der Headerzeile. Dort ist auch der Switch zum L E S E MODUS
Entdecken Sie eine Welt voller Dunkelmodus-Optionen mit WP Dark Mode, DarkMySite und vielen anderen Plugins, die Ihre Website in ein neues Licht tauchen.
Der Darkmode hat den Vorteil, die Augen zu schonen, da weniger Blauanteile im Licht vorhanden sind. AuĂerdem kann er dazu beitragen, den Akku von mobilen EndgerĂ€ten zu schonen, da bei dunkleren Stellen auf dem Display weniger Energie benötigt wird.
Dunkelmodus vs. Lesemodus
Der Schönheit von Dunkelmodus,
so ist hier auch Lesemodus.
Allerdings ist die Aussage, dass weiĂer Text auf schwarzem Hintergrund augenschonender ist, nicht unbedingt korrekt. Viele Nutzer bevorzugen andere Farbgebungen, die angenehmer fĂŒr die Augen sind. Auch das Plug-in 'WP Dark Mode' und andere bieten eine Vielzahl von Optionen zur Farbauswahl an.
Nun gleich das fĂŒr so Frage im Nachhinein âŠ

Tab 1: Die Favoriten
Tab 2: Im Ăberblick von Plug-ins
Tab 3: Designs zur Synergie mit Dunkel-Modus
WP Dark Mode
Hier ist erst einmal das Plug-in WP Dark Mode hervorgehoben. Nicht dass es der alleinige Favorit ist, sondern es ist einfach gut geeignet, um das VerstĂ€ndnis fĂŒr diese Plugins zu entwickeln. Mein persönlicher Favorit wĂ€re jedoch DarkMySite (siehe Tab 2), wenn ich nicht bereits die gesamte Website hier mit "WP Dark Mode" an den Dunkelmodus angepasst hĂ€tte. Diese Auswahl soll dir dabei helfen, herauszufinden, welches Plug-in am besten zu dir passt und somit dein Favorit wird.
Das Plug-in WP Dark Mode
WP Dark Mode: "Machen Sie Ihre Website dunkel und genieĂen Sie ein verbessertes LesevergnĂŒgen".
Hier geht es um das Plugin WP Dark Mode. Es wurde sehr performant programmiert, da es sich nahtlos in WordPress integriert und keinerlei Auswirkungen auf die Geschwindigkeit der Website hat. Wie bei vielen WordPress-Plug-ins ist auch bei WP Dark Mode die Free-Version groĂzĂŒgig mit Features ausgestattet.
Nach dem Download und der Aktivierung des Plugins stehen einem verschiedene Einstellungsmöglichkeiten zur VerfĂŒgung:
Color Settings
Im Folgenden geht es um die Basiseinstellungen des Plug-ins. Es zeigt, wie sich die Website von Anfang an prÀsentiert, wenn das Plug-in aktiviert ist.
Der Basis im Content-Bereich da sind die Farben
Hinweis zum Bildschirmfoto: Es ist jedoch zu beachten, dass das Bildschirmfoto im Dunkel-Modus aufgenommen wurde, wodurch die Farben durch die Einstellungen "Low Brightness" und "Grayscale" verfÀlscht sind.

Die Farbe links ist die Farbe im Content Background und rechts die Textfarbe.
Das KontrastverhÀltnis zur Textfarbe

⊠also guten Farbkontrast.
Der Darkmode in Color Preset
Beide Themes sind kostenlos: Gold und Sapphire. Allerdings gibt es derzeit ein Problem unterhalb der linken Seitenleiste. Das CSS von .site:before
ist in den Themes Gold und Sapphire nicht korrekt. Das ist jedoch kein Problem im Theme 'Basis', das hier vorgestellt wurde. Mit der PRO-Version 'Ultimate' kann das Problem behoben werden, indem das CSS wie folgt geÀndert wird:
.site:before { background: #252626; }
- Ist es wirklich nötig, auf die PRO-Version 'Ultimate' zu upgraden, um das CSS richtig anzuwenden? Die Antwort lautet: Nein, das ist nicht der Fall. Mit der PRO-Version hat man lediglich die Option, bestimmte Elemente einzuschlieĂen. Aber auch ohne diese Option kann man das CSS richtig anwenden. Wie? Hier empfiehlt sich die Suche nach dem passenden CSS-Selektor. Siehe CSS Selektor finden.
Das Theme Gold und Sapphire
In der kostenlosen Version gibt es neben dem Basisthema auch zwei feste Themen. Das Farbschema und das KontrastverhÀltnis zur Textfarbe sind dabei sehr gut.
Von Pro ist das alles anpassbar:

Color Settings zur Helligkeit, Kontrast und Sepia sind der PRO-Version
Des Free ist aber
das zum Image Settings

⊠und so wĂŒnschen wie den Leuten von Plug-in 'WP Dark Mode' viel Erfolg!
- Eia popeia, der Keyboard Switch (Ctrl + ALt + D)
Tab 2: Im Ăberblick von Plug-ins
âŠvon Plug-ins
Weiter von Plug-ins Dark-Mode
Die folgenden Plug-ins wurden gesehen.
Die Informationen
Ktrv. = KontrastverhÀltnis von Hintergrundfarbe vs. Textfarbe
Stand 2023-03 | GröĂe | Benutzer | Anmerkung | T |
---|---|---|---|---|
Blackout: Dark Mode Widget | 72 KB | 400+ | OK. â so etwa S/W, Ktrv. 14.2 | |
Blinds | 28 KB | < 10 | Nur aktivieren ⊠OK mit so Ktrv. 7.6 | |
Dark Mode Toggle | 260 KB | 2000+ | Das ist sehr von PRO fĂŒr Free nicht so gut. Ktrv. 14 fast wie S/W | đ |
Dark Mode Lite | 1,5 MB | < 10 | Das ist eher nur fĂŒr PRO. Sonst so S/W. Dashb. Umg. beeinflusst. | đ |
Darklup Lite – WP Dark Mode | 1,9 MB | 200+ | Das ist eher nur fĂŒr PRO. Sonst so S/W | đ |
Droit Dark Mode | 4,7 MB | 2.000+ | Das ist eher nur fĂŒr PRO. â sonst Ktrv. 1.6 | đ |
Go Night Pro | 4,5 MB | 200+ | U. a. von Free zeitbasierter Dunkelmodus. – siehe1 | âïž |
Night Eye – Dark Mode Plugin | 2,8 MB | 100+ | Das ist ein Pro-Plug-in und geht auch kostenlos. – siehe2 | đ |
Night Mode for WordPress | 4,2 MB | 100+ | An und fĂŒr sich. – siehe3 | |
WP Dark Mode | 4,5 MB | 10.000+ | Des Moments. â s. Tab 1 | đâ |
WP Night Mode | 113 KB | 2.000+ | âŠEinstellungen sind im Customizer. – siehe4 | đ” |
DarkMySite | nur! â 530 KB | 6000+ | Schön fĂŒr Hobbyisten mit Zeiteinstellung. â siehe5 | đâ |
⊠und die Bemerkungen
1Das Plug-in "Go Night Pro"
- Des Letzteren ist hier das Plug-in mithin Warnings nicht zu aktivieren. Sowohl PHP-Version 7.4 als auch PHP 8 ist es nicht kompatibel. Der Testumgebung am â MAMP mit PHP 7.4 funktioniert das Plug-in, aber mit PHP 8 auch nicht.
Das von Free wĂ€re mit zeitbasierter Dunkelmodus. Und das Pro in Free ist sehr groĂzĂŒgig.
- Zeitbasierter Dunkelmodus.
- Bspw das Missfallen Twenty Fourteen Theme der Seitenleiste links mit
.site:before
ist. Aber das ist dort bei Custom CSS Settings in die Reihe zu bringen! â sodass die Auszeichnung nur im Dunkel Modus ist:.site:before { background: #16323B; }
- Eben unter Colors "Use Custom Colors PRO", das ist auch fĂŒr die Free-Version offen, gleich wie das "Dim Images in Dark Mode PRO" frei steht.
Das mit Fee scheint hier so allen zum Pro so. â Dankeschön đ â wenns so bleibt, und das Plug-in gewartet und mit update zur PHP-Version 8 aufwartet. Na da hoffte ich dann mal fĂŒr den Autor an Spenden.
2Das Plug-in "Night Eye – Dark Mode Plugin"
- So bspw Twenty Fourteen Theme ist das Missfallen der Seitenleiste links von wegen
.site:before
nicht. - ⊠Aber ja, die zusÀtzliche Nachfrage zum Switch ist nicht das wahre.
- Bleibt von Free sehr angenehmes KontrastverhÀltnis von Background und Textfarbe.
Night Eye originĂ€r ⊠Intelligente Konvertierung. Night Eye invertiert die Farben nicht nur, sondern wandelt sie um. Dies fĂŒhrt zu einem reibungslosen und konsistenten Dunkelmodus-Erlebnis. â und Sehens des Plug-ins möchte auch ich das bejahen.
- Das der Images, so Low Brightness und Grayscale wie bei WP Dark Mode ist dem Plug-in auch laut Beschrieb nicht. Das fehlt noch. Aber das geht auch so:
/* Bspw */ [nighteyeplgn="active"] img { -webkit-filter: brightness(0.9); -webkit-filter: grayscale(0.6); opacity: 0.9; }
Das Plug-in gibt es auch KOSTENLOS: Gleicher Plan mit allen Funktionen, keine EinschrĂ€nkungen! Das kostenlose Night Eye WP Pro wird mit einem Referral-Link in der FuĂzeile und einer diskreten Anzeige des Plug-ins geliefert.
3Das Plug-in "Night Mode for WordPress"
Die Einstellung zum Switch ist des Plug-ins und danach unter Dashboard / Design / MenĂŒs zu bewerkstelligen. â das ist gleich mal so zu checken. Als Extra ist 'Font Size kit'.
- Das CSS von
.site:before
fĂŒr die Seitenleiste links das funktioniert nicht. Und das unter Extras / Custom CSS so.site:before {background: #242525}
funktioniert, aber das ist dann auch ohne Dunkel Modus visuell. â so Auszeichnung folgt dann der Classbody.nm_active
bspw:body.nm_active .site:before { background: #242525; } body.nm_active { background: #24478F !important; }
- Der Button zum Switch Dunkel Modus wie auch hier das zur SchriftgröĂe ist nicht UX-Design, also fĂŒr den Besucher nicht konform, denn hierzu ist das erst mal zu suchen ⊠AuĂerdem ist zum Switch da das Icon von der Suche nicht so das richtige. Hinzu möchte so Floating Button von Erfolg sein, ist aber nicht.
- Schlicht, aber wirksam ist das mit den Bildern durch 'Image filter (Opacity)'.
Eben solches das zum Switch wird der Grund sein fĂŒr so wenig Installationen. Der Punkte da oben lieĂen sich noch sinNvolles hinzugeben. So der Dunkelmodus mit der Zeitspanne zur Aktivierung. Im Grunde ist aber schon sehr gut. Die Farben gehen aus den Einstellungen hervor und das meiste ist dann schon perfekt. â hier dem Beispiel war ja nur das mit .site:before
zum Nachjustieren.
So möchte man dem Autor des Plug-ins richtig Zusprechen am Weg zu sein, das Plug-in hin Bravour!
4Das Plug-in "WP Night Mode"
Einstellungen ĂŒber Customizer. Aber u. a. das mit .entry-header
, .entry-meta
und .entry-content
passt Twenty Fourteen Theme nicht. OK das ist dann im Customizer mit:
CSS
body.wp-night-mode-on { background: #24478F !important; } body.wp-night-mode-on .search-toggle { background: #24478F; } body.wp-night-mode-on .search-box { background: #24478F; } body.wp-night-mode-on .search-field { background-color: #242525; } body.wp-night-mode-on .entry-header { background: #242525; } body.wp-night-mode-on .entry-meta { background: #242525; } body.wp-night-mode-on .entry-content { background: #242525; } body.wp-night-mode-on #secondary { background: #242525; } body.wp-night-mode-on .site:before { background: #242525; } body.wp-night-mode-on #content-sidebar .widget-title { border-color: #908475; color: #CCC5BC; } body.wp-night-mode-on img { -webkit-filter: brightness(0.9); -webkit-filter: grayscale(0.6); opacity: 0.9; }
Das CSS zusammengefasst:
body.wp-night-mode-on {
background: #24478F !important;
}
body.wp-night-mode-on .search-toggle,
body.wp-night-mode-on .search-box {
background: #24478F;
}
body.wp-night-mode-on .search-field {
background-color: #242525;
}
body.wp-night-mode-on .entry-header,
body.wp-night-mode-on .entry-meta,
body.wp-night-mode-on .entry-content,
body.wp-night-mode-on #secondary,
body.wp-night-mode-on .site:before {
background: #242525;
}
body.wp-night-mode-on #content-sidebar .widget-title {
border-color: #908475;
color: #CCC5BC;
}
body.wp-night-mode-on img {
-webkit-filter: brightness(0.9);
-webkit-filter: grayscale(0.6);
opacity: 0.9;
}
So dieser Art von Plug-in als Kit von nur 113 KB der Vorteil aber hin Bravour ist fĂŒr den Anwender des mehr an CSS anzupassen. Oder so fĂŒr sehr schlichte Themen geeignet. âŠfehlt fast nur noch der Button zum Switch und dass mit Beschrieb findet sich https://github.com/markoarula/wp-night-mode
Motivation fĂŒr das Plugin WP Night Mode
Wenn der Autor die Zeit ⊠des Switchs von Shortcode auch Floating-Button bietet und die zeitbasierte Funktion fĂŒr Dunkelmodus, sodass dann tags auch wieder Normalmodus. Dann ist das Plug-in fast schon Super!
- Aber wie gesagt, die CSS-Auszeichnung fĂŒr sich kann sehr aufwendig werden, insbesondere wenn wie hier des mehr an Plug-ins von Outfit anzupassen sind. Da geht dann so anders Darkmode-Plug-in.
In diesem SinNe wĂŒnschen wir dem Autor viel Erfolg und nicht zuletzt das Sensorium des Plug-Ins.
5Folgendes, mein Favorit!
WĂ€re dies nicht bereits die Webseite, auf der ich die gesamte Website mit dem "WP Dark Mode" an den Dunkelmodus angepasst habe, wĂ€re dies meine bevorzugte Wahl. Denn dieses Plug-in ermöglicht eine optimierte Anpassung der Farben, insbesondere wenn auf der Website dynamische ĂbergĂ€nge zwischen dem Hell- und Dunkelmodus durch FarbverlĂ€ufe sowie dem separaten Lesemodus stattfinden. Es ist wesentlich einfacher, die passenden Farben manuell einzustellen, im Vergleich zu dem, was WP Dark Mode automatisch berechnet. Hier kann man die Farben individuell anpassen, was die Handhabung deutlich erleichtert. FĂŒr eine einfache Website spielt es jedoch keine Rolle, welches Plug-in verwendet wird, da beide grundsĂ€tzlich angemessen sind.
DarkMySite: "Verwandeln Sie Ihre Website in den perfekten Dark-Mode, ganz einfach und ohne Aufwand".
Das Plug-in ist, welches sich die meisten wĂŒnschen, zudem das von Zeitbasierten Dunkelmodus! â von frei fĂŒr die Hobbyisten.
Das Plug-in DarkMySite ist ein junges Plug-in, welches sicherlich zeitgemĂ€Ăer Programmierung und nicht zuletzt deshalb innerhalb so kurzer Zeit so erfolgreich ist.
In Merks zum Zeitpunkt MĂ€rz 2023 meine Supportanfrage.
Und weiter, weiter! â LICHT AUSSCHALTEN – DARK MODE ZU WORDPRESS HINZUFĂGEN
Tab 3: Designs zur Synergie mit Dunkel-Modus
Synergie
Designs zur Synergie mit Dunkel-Modus
Das ist bspw. mit Plug-in WP Dark Mode.
- In Anwendung mit Plug-in Autoptimize ist evtl. darauf zu achten, die
js/dark-mode.min.js
auszuschlieĂen. Das ist der Einstellung Autoptimize dort bei "Folgende Skripte von Autoptimize ausschlieĂen" einzutragen. - Dasselbe wenn mit Plug-in Async JavaScript ist das dort bei Script Exclusion.
So ein paar Anpassungen sind da und dort in Kauf zu nehmen. Das betrifft fast nur die Plug-ins, zum Beispiel:
Das Plug-in Tabby Responsive Tabs (wenn angesprochen, anklicke hier), dort sollte das mit dem Hintergrund und geringe Anpassung der Tabs erfolgen. Ăhnliches im Feedback-Plug-in Helpful, siehe hier das unterhalb dann. Im andern ist auf den Hintergrund bei so Pop-ups wie von Plug-in Easy Fancy Box und 'Boxzilla' zu achten, Background in etwa #f9f9f9
. Ăhnlich auch das bei Overflow scroll gradient und dem mit Text auf- / einklappen, wenn da CSS ist. Weiter die horizontale Linie das <hr />
ist hier bspw Twenty Fourteen Theme im dunkel. Zum sichtbar: also das ist fĂŒr das Plug-in 'WP Dark Mode Free' so abgestimmt
/* hr for dark */ hr { background: #b2b2b2; opacity: 0.7; }
Und fĂŒr die Seitenleiste links der Linie wie hier zum bspw <hr class="hr2" />
so ist das:
Die Ănderung von⊠| âŠzu, das von linear-gradient der Farbe |
.hr2 {
margin: 35px 0;
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));} | .hr2 {
margin: 35px 0;
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(140,150,156, 0.8), rgba(0, 0, 0, 0));
} |
Also im Gesamten ist das meist nur von wegen dem Background.
- Die Ănderung ist in Blau und die Zugabe ist in Gelb.
Plug-in 'AH Code Highlighter' war nun das von anzupassen, siehe zum Plugin-Datei-Editor das Theme dort. Hier ist das bspw die standard_theme.css
Die Ănderung von⊠| âŠzu, das von Background |
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
} | /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: 5em 0 1em 0; overflow: auto; background: none; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: none; } |
- Falls das Plug-in mal Update ist zu erneuern, aber das Plug-in hat fast nie Update.
In die style.css
 oder auch gleich im Plug-in wie oben schon, so ist das noch fÀllig:
/* AH Code Highlighter operator, = && ! usw. */ .language-css .token.string { color: #a67f59; background: none; }
Die Snippets zur functions.php
 ab ins Plug-in Code Snippets.
Mit Obhut der Codes! â so bleibt das auch nach Theme-Update.
Oder Child Theme! â zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!
/* AH Code Highlighter operator, = && ! usw. */ .token.operator { color: #a67f59 !important; background: none !important; }
Fazit zur Synergie
Da und dort kann sein, dass abzugleichen ist. â so Falls ist auch gar nichts.
Aktualisiert im Jahr 2023-November