WP Dark Mode

Weiter ist hier so zur Idee von Dunkel-Modus der Website von WordPress. Das für sich sehr wenig von Anwendung der Plug-ins sind, wird sein, dass da dessen Farbgebung gern das so mit weißer Textfarbe und so dunkeln Hintergrund als schwarz ist. Und anders von Farbgebung? – das kommt dann ganz gut an. Auf Sicht ist das besser als gedacht, ebenda besser gefühlt. – so des Nachts. –  Wirkt am besten so der Synergie von Arbeit und dann dem Schlaf.

Darkmodus hat den Vorteil, die Augen zu schonen, da weniger Blau-Anteile im Licht sind. Weiter den Nebeneffekt, dass bei mobilen Endgeräten der Akku geschont wird, da das Display bei weniger hellen Stellen weniger Strom braucht.

Von Wegen zur Augenschonung, so weiß auf schwarz ist nicht so angenehme. Der Behauptung Einstimmung? Da der Meinung sind das auch Plug-in ‚WP Dark Mode‘ und andere.

Zum Dunkel-Modus Website

Der Floating-Button zum Switch von Normalansicht / Dunkel-Modus vs. ist hier der Website rechts unten.

Nun gleich das für so Frage im Nachhinein …

[mpp id=“2″]

[tabbylink tab=1 offset=100 fade=400]Tab 1: Der Favorit[/tabbylink]
[tabbylink tab=2 offset=100 fade=400]Tab 2: Im Überblick von Plug-ins[/tabbylink]
[tabbylink tab=3 offset=100 fade=400]Tab 3: Designs zur Synergie mit Dunkel-Modus[/tabbylink]

[tabby title=“WP Dark Mode“]

Das Plug-in WP Dark Mode

Oh! – it a WP Dark Mode.

Hier ist erst mal das Plug-in WP Dark Mode. Das muss sehr performant programmiert sein, da es selbst hier keine Auswirkung zeigt, als das es ist, was es ist, Dunkel-Modus. Wie hier auf WordPress ist, sind die Plug-ins der Free-Version sehr großzügig und so ist sich auch mit dem Features WP Dark Mode zu arrangieren.

Nach dem Download des Plug-ins und aktivieren ist erst mal …

Color Settings das …

Im Folgenden geht es von Basiseinstellung. Also wie sich die Website durch das Plug-in von Anfang an so präsentiert.

So siehe der Website im Frontend

Der Basis im Content-Bereich da sind die Farben …

Hinweis zum Bildschirmfoto: Zur korrekten Überprüfung von Farbe, so wäre der Dunkel-Modus wegzumachen. Denn im Dunkel-Modus ist das nämlich bei Image Settings mit ‚Low Brightness‘ und ‚Grayscale‘. Und das mit der Textfarbe ist etwas fließend. Hier dem Beispiel ist das der Überschriften hervorgehend.

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

Die beide Theme von Free. Das ist Theme-Gold und Sapphiere. Aber des Moments (2021-September), da hapert es unterhalb der linken Seitenleiste. Also das CSS von .site:before ist nicht so wie sein soll. – des von ohne Theme also nur des ‚Basis‘ wie hier der Website ist das nicht. Aber an sich mit Version Ultimate ist das Missfallen nicht, denn das ist dann über CSS:

.site:before {
background: #252626;
}

• Dass CSS erst mit ‚Ultimate‘, das scheint der Hinsicht nicht, aber das wird mithin Version Pro bei ‚Elemente einschließen‘ richtig sein. So wie hier dem Beispiel das dann allein mit .site:before

Das Theme Gold und Sapphire

Des Free sind neben dem Basis zwei fixe Themen. Die Farbe und das Kontrastverhältnis zur Textfarbe ist sehr gut:

Von Pro ist das alles anpassbar:

… gleich wie ohne Version von Pro bzw. Ultimate selbstredend kein CSS, das was WP Dark Mode ist.

Des Free ist aber das zum Image Settings:

… und so wünschen wie den Leuten von Plug-in ‚WP Dark Mode‘ viel Erfolg! – so meine Danksagung.

• Eia popeia, der Keyboard Switch (Ctrl + ALt + D)

[tabbylink tab=2 offset=100 fade=400]Tab 2: Im Überblick von Plug-ins[/tabbylink]

[tabby title=“…von Plug-ins“]

Weiter von Plug-ins Dark-Mode

…und nun hier doch so für nachts als Dunkel.

So die Plug-ins gesehen.

Die Informationen

Ktrv. = Kontrastverhältnis Hintergrundfarbe vs. Textfarbe

Bemerkungen zum…

¹Das 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 da 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.

²Das 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.

³Das 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 Class body.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!

⁴Das 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:

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 ein Nonplusultra.

• 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

[tabbylink tab=3 offset=100 fade=400]Tab 3: Designs zur Synergie mit Dunkel-Modus[/tabbylink]

[tabby title=“Synergie“]

Designs zur Synergie mit Dunkel-Modus

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:

.hr2 {
margin: 35px 0;
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));}

.hr2 {
margin: 35px 0;
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgb(0, 0, 0, 0), rgb(140,150,156), rgb(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:

/* 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;
}

Fazit zur Synergie

Da und dort kann sein, dass abzugleichen ist. – so Falls ist auch gar nichts.

[tabbyending]

[mybutton]