WP Dark Mode

Bild von kerttu
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

– weiter hier so zur Idee von Dunkel-Modus der Website. Das kommt ganz gut an. Auf Sicht ist das besser als gedacht, ebenda besser gefühlt. – so des Nachts. Das Plug-in WP Dark Mode 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 somit ist sich mit dem Features WP Dark Mode zu arrangieren.

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

Dunkel-Modus Website

Oh! – it a WP Dark Mode.

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

WP Dark Mode-general-settings

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 im Content-Bereich,
da sind die Farben so von …

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’. Das mit der Textfarbe ist etwas fließend. Hier dem bspw ist das dem Buchstaben D hervorgehend.

Dunkel-Modus die Farbe im Content Background und Textfarbe

Die Farbe links ist die Farbe im Content Background und rechts die Textfarbe.

Das Kontrastverhältnis zur Textfarbe
Kontrastverhältnis von Basis
Kontrastverhältnis von Basis

… also guten Farbkontrast.

Der Darkmode in Color Preset

Die beide Theme von Free. Das Theme Gold und Sapphiere.

Theme Gold und Sapphire

Das sind zwei fixe Themen. Die Farbe und das Kontrastverhältnis zur Textfarbe ist sehr gut:

Von Pro ist das alles anpassbar:

WP Dark Mode-Color_Settings-brightness-contrast-sepia

… gleich wie ohne Pro selbstredend kein CSS.

  • Eia, der Keyboard Shortcut zum Switch (Ctrl + ALt + D).

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

Nun aber zur Synergie mit Dunkel-Modus …

So ein paar Anpassungen sind da und dort in Kauf zu nehmen. Zum Beispiel:

Das Plug-in Tabby Responsive Tabs (wenn angesprochen, anklicke hier), dort sollte das mit dem Hintergrund und geringe Anpassung der Tabs erfolgen. Im andern ist auf den Hintergrund bei so Pop-ups wie von Plug-in Easy Fancy Box und ‘Boxzilla’ zu achten. So zum bspw Background color von #f9f9f9. Ähnlich auch das bei Overflow scroll gradient und dem mit Text auf- / einklappen. Im Gesamten ist das meist nur von wegen dem Background color. Auch das im Zusammenspiel mit ‘WP Responsive Table’ war dabei. Plug-in ‘AH Code Highlighter’ war nur das von anzupassen:

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

Eben da und dort kann sein, dass zur Vollendung von Harmonie das zum Justieren ist.

… Und wie ist dein Erfolg des Beitrags?

Wegerl's fix zum Feedback-Plug-in