Willkommen beim Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.

WP Dunkel-Modus
10 Plug-ins im Vergleich

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

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; 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
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Der Dunkelmodus für Websites erfreut sich zunehmender Beliebtheit. Die klassische Farbgebung mit weißem Text auf schwarzem Hintergrund gilt als veraltet. Diese Kombination war oft nicht besonders augenfreundlich, daher bieten einige Plugins alternative Farbschemata an, die besser ankommen können. Die Unterschiede zwischen diesen Plugins sind auch der Kern dieses Beitrags. Die Einführung des Dunkelmodus kann langfristig dazu beitragen, die Belastung der Augen zu verringern und ein angenehmeres Surferlebnis zu schaffen. Die volle Wirkung des Dunkelmodus entfaltet sich erst in einer dunklen Umgebung, während er sich in einem hellen Umfeld eher gegensätzlich auswirken kann.

Der Dunkelmode 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 versus Lesemodus:
Zwei Wege, ein Ziel – die optimale Leseerfahrung.

Für den Dunkelmodus wären zusätzlich zur automatischen 'color'-Anpassung auch 'font-size', 'letter-spacing' und 'font-weight' äußerst vorteilhaft. Diese Funktionen bieten jedoch keine der verfügbaren Plug-ins an. Daher zeigt das Beispiel auf der Website, wie diese Anpassungen im Wechsel zwischen Hell- und Dunkelmodus zu einem angenehmeren Schriftbild führen können. Allerdings ist zu beachten, dass der Dunkelmodus je nach Umgebung fragwürdig sein kann und seine angenehme Wirkung erst in dunklen Umgebungen voll zur Geltung kommt.

Nun gleich das für die Frage im Nachhinein …

Dunkel-Modus-Website! (?)



Start der Umfrage im Oktober 2021

ERGEBNISSE

Wird geladen ... Wird geladen ...

Inhaltsverzeichnis

Tab 1: Zur Einführung
Tab 2: Im Überblick von Plug-ins
Tab 3: Designs zur Synergie mit Dunkel-Modus

Zur Einführung

Entdecke die Welt voller Dunkelmodus-Optionen mit WP Dark Mode, DarkMySite, Night Eye und vielen anderen Plug-ins, die deine Website in ein neues Licht tauchen.

Zunächst sei das Plug-in WP Dark Mode hervorgehoben. Nicht, weil es der alleinige Favorit ist, sondern vielmehr, weil es sich gut eignet, um ein Verständnis für diese Art von Plug-ins zu entwickeln. Persönlich bevorzugte ich jedoch DarkMySite (siehe Tab 2). Allerdings ist das Plug-in Night Eye letztendlich meine Wahl. Die folgende Auswahl soll helfen, das für dich passende Plug-in zu finden und möglicherweise zu deinem Favoriten zu machen!

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:

WP Dark Mode-general-settings

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.

Der Basis Dunkel-Modus die Farbe im Content Background und Textfarbe
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
WP Dark Mode, Kontrastverhältnis von Basis
Kontrastverhältnis von Basis

… also guten Farbkontrast.

Der Dunkelmodus 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:

.wp-dark-mode-active .site:before {
background: #252626;
}
  • Mit der PRO-Version hat man die Option, bestimmte Elemente einzuschließen, aber auch ohne diese Option kann man das CSS richtig anwenden.
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:

WP Dark Mode Color Settings Brightness, Contrast und Sepia
Color Settings zur Helligkeit, Kontrast und Sepia

Color Settings zur Helligkeit, Kontrast und Sepia sind der PRO-Version

Des Free ist aber
das zum Image Settings

Plug-in WP Dark Mode, Low Brightness und Grayscale
Plug-in WP Dark Mode, Low Brightness und Grayscale sehr ansprechend

… 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

Plug-ins

Plug-ins Dunkelmodus

Die folgenden Plug-ins wurden gesehen.

WordPress und hier das Angebot von 10 Plug-in zum Dark Mode
Die Informationen: Ktrv. = Kontrastverhältnis von Hintergrundfarbe vs. Textfarbe.

Stand 2023-03GrößeBenutzerAnmerkungT
Blackout: Dark Mode Widget72 KB400+OK. – so etwa S/W, Ktrv. 14.2
Blinds28 KB< 10Nur aktivieren … OK mit so Ktrv. 7.6
Dark Mode Toggle260 KB2000+Das ist sehr von PRO für Free nicht so gut.  Ktrv. 14; fast wie S/W🔐
Dark Mode Lite1,5 MB< 10Das ist eher nur für PRO. Sonst so S/W.  Dashb. Umg. beeinflusst.🔐
Darklup Lite – WP Dark Mode1,9 MB200+Das ist eher nur für PRO. Sonst so S/W🔐
Droit Dark Mode4,7 MB2.000+Das ist eher nur für PRO. – sonst Ktrv. 1.6🔐
Go Night Pro4,5 MB200+U. a. von Free zeitbasierter Dunkelmodus. – siehe1
Night Eye – Dark Mode Plugin2,8 MB100+ ?Das ist ein Pro-Plug-in und geht auch kostenlos. – siehe2
Night Mode for WordPress4,2 MB100+An und für sich. – siehe3
WP Dark Mode4,5 MB10.000+ Siehe Tab 1🔐✅
WP Night Mode113 KB2.000+…Einstellungen sind im Customizer.  – siehe4
DarkMySitenur! – 530 KB6000+Schön, u.a. mit freier Zeiteinstellung. – siehe5🔐✅

1Go 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.

2Night Eye – Dark Mode Plugin

Der Dunkelmodus in Verbindung mit dem Night Eye-Plugin wird im Browser durch spezielle CSS-Stile und Anpassungen realisiert. Wenn der Nutzer den Dunkelmodus aktiviert, ändert das Plugin dynamisch das Erscheinungsbild der Webseite, um die Darstellung für eine angenehmere Nutzung in dunklen Umgebungen anzupassen.

Night Eye – Dark Mode Plugin

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.

Der Wechsel zwischen Hell und Dunkel erfolgt durch anklicke des Buttons und dann im Dialogfenster des Night Eye Plug-ins. Nach der Aktivierung oder Deaktivierung der Modi wird die Website automatisch neu geladen, um eine sofortige konsistente Darstellung zu gewährleisten.

  • … Ja, die zusätzliche Anfrage zum Wechseln und der nachfolgenden Neuladung der Website ist für manche nicht ideal, aber dennoch akzeptabel und seriös. Nach einer Neuladung der Website passt sich die Farbgestaltung aller Elemente in einem äußerst komplexen Zusammenspiel sehr gut an, was die Entscheidung rechtfertigt.
  • Die Farbverläufe sind hier sogar perfekt umgesetzt. Weitere Anpassungen sind somit kaum erforderlich, insbesondere im Lesemodus, der hier auf der Website vorhanden ist. Ein anderes Plug-in, das den Wechsel ohne Neuladung der Website ermöglicht, erforderte an sehr viel mehr Zeilen CSS, um einen konformen Dunkelmodus in verschiedenen Bereichen wie Relavansi, Tabmenüs, PRISM-Codes, Tabellen sowie im Lesemodus zu erreichen.

Das der Images so Einstellugen Low Brightness und Grayscale wie bei WP Dark Mode ist mit Night Eye nicht dabei. Folgend ist das mit ein paar Zeilen CSS gemacht.

  • Zum Beispiel wie es hier der Website, da ist des Beipiels auch die Schriftfarbe etwas anders, als es der Einstellung mit "Dark theme: Dark" wobei das bei "Color adjustment" so belassen ist, wie es der Grundeinstellung hervorgeht.
/* Night Eye: Ändert die Farbe, den Buchstabenabstand und die Schriftstärke von Absätzen und Listen */
[nighteyeplgn="active"] #content p,
[nighteyeplgn="active"] #content li {
    color: #E3DCD1 !important;
    letter-spacing: 0.4px;
    font-weight: 350;
}

/* Night Eye: Ändert die Farbe, den Buchstabenabstand und die Schriftstärke von fett markierten Texten */
[nighteyeplgn="active"] #content strong,
[nighteyeplgn="active"] #content b {
    color: #E3DCD1 !important;
    letter-spacing: 0.6px;
    font-weight: 500;
}

/* Night Eye: Ändert die Darstellung von Bildern */
[nighteyeplgn="active"] img {
    filter: brightness(80%) grayscale(80%);
    opacity: 0.9;
}

/* Night Eye: Entfernt den Hintergrund für CSS-String-Token */
[nighteyeplgn="active"] .language-css .token.string {
    background: none;
}

/* Night Eye: Ändert die Darstellung von eingebetteten Inhalten */
[nighteyeplgn="active"] p > iframe,
[nighteyeplgn="active"] span > iframe {
    filter: brightness(85%) grayscale(10%) !important;
}

/* Night Eye Button */
[nighteyeplgn="active"] {
.NightEyeWidget {
filter: brightness(110%) grayscale(90%);
}
}
  • Der Button (NightEyeWidget) weist bei der Positionierung gelegentlich Unstimmigkeiten auf, insbesondere wenn er anders als oben und unten ausgerichtet werden soll. Dieses Problem wurde hier der Website wie folgt gelöst:
/* NightEyeWidget @media */
@media (min-width: 1024px) and (max-width: 1919px) {
.NightEyeWidget {
	background: transparent !important;
	margin-left: 30%;
	margin-top: 60px;
	width: 60px !important;
  height: 60px !important;
	z-index: 3 !important;
}
}

@media (min-width: 1920px) and (max-width: 2559px) {
.NightEyeWidget {
	background: transparent !important;
	margin-left: 38%;
	margin-top: 80px;
	width: 60px !important;
  height: 60px !important;
	z-index: 3 !important;
}
}

@media (min-width: 2560px) {
.NightEyeWidget {
	background: transparent !important;
	margin-left: 41%;
	margin-top: 100px;
	width: 60px !important;
  height: 60px !important;
	z-index: 3 !important;
}
}
  • Weiter eines aufblitzenden Effekts in Verbindung mit dem Preloader wurde der Button zunächst mittels CSS auf display: none; gesetzt:
.NightEyeWidget {
	display: none;
}

… und anschließend über JavaScript wieder sichtbar gemacht:

document.addEventListener("DOMContentLoaded", function() {
    var nightEyeWidget = document.querySelector('.NightEyeWidget');
    if (nightEyeWidget) {
        var isHomepage = document.body.classList.contains('home');
        var isBlog = document.body.classList.contains('blog');
        var isSinglePost = document.body.classList.contains('single');
        
        if (!(isHomepage || isBlog) && !isSinglePost) {
            // NightEyeWidget auf Seiten ausblenden, die nicht die Startseite, Blog oder einzelne Beiträge sind
            nightEyeWidget.style.display = 'none';
        } else {
            // Nach einer gewissen Zeit das NightEyeWidget wieder anzeigen
            setTimeout(function() {
                nightEyeWidget.style.display = 'block'; // Anzeigen des NightEyeWidgets
            }, 500); // Hier kannst du die Zeit in Millisekunden festlegen (z.B. 500 für 0,5 Sekunden)
        }
    }
});
  • Spitz pass auf! Zusätzlich sollte die Positionierung des Buttons .NightEyeWidget ausschließlich auf der Startseite, der Blogseite und bei einzelnen Beiträgen erfolgen, welches im obigen Code mit integriert ist.

Das Night Eye WP Pro-Plug-in ist auch in einer kostenlosen Version verfügbar, die denselben Funktionsumfang bietet und keine Einschränkungen hat. Die kostenlose Night Eye WP Pro-Version enthält einen Referral-Link in der Fußzeile und zeigt das Plug-in diskret an.

Es bleibt die Frage, warum nur über 100 Benutzer das Plug-in aus dem offiziellen WP-Verzeichnis nutzen. Möglicherweise liegt das daran, dass viele andere das PRO Free-Modell verwenden, das exklusiv über Night Eye WP PRO erhältlich ist. Auf den Link klicken und sich über die E-Mail-Adresse registrieren.

3Night 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 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!

4WP 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 Dunkelmodus-Plug-in.

In diesem SinNe wünschen wir dem Autor viel Erfolg und nicht zuletzt das Sensorium des Plug-Ins.

5DarkMySite

DarkMySite: "Verwandeln Sie Ihre Website in den perfekten Dunkelmodus, 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.

DarkMySite – Advanced Dark Mode Plugin for WordPress

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.

Erfahrungswert: Wäre dies nicht bereits die Webseite gewesen, 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.


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 Dunkelmodus

Synergie

Designs zur Synergie mit Dunkelmodus

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 ist dem Hintergrund bei 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

Es kann vorkommen, dass bestimmte Aspekte mit CSS abgeglichen werden müssen, hier und da – obwohl es auch vorkommen kann, dass keine Anpassungen erforderlich sind. In Bezug auf anspruchsvolle Websites habe ich mit dem Plug-in Night Eye die besten Erfahrungen gemacht.


Aktualisiert im Jahr 2024-Februar