Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
WP Wegerl.at: Einzigartige Designs, optimiert für das Nutzererlebnis.
Eule, Night Eye
smilies.4-user.de

Night Eye Plug-in –
Dunkelmodus in Perfektion

Illustration (var.) von OpenClipart-Vectors
Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.  Info


Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)


Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.




Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.


Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept


Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.




Werbung

Einfach und intuitiv –
Der Classic-Editor für alle. Info


Classic Editor & Advanced Editor Tools
Erleben Sie es.


Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.




Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.


Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools


Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.





Der Dunkelmodus oder Dark-Modus mit dem 'Night Eye-Plug-in' wird im Browser durch spezielle CSS-Stile und Anpassungen gemacht. Wenn der Nutzer den Dunkelmodus aktiviert, ändert das Plug-in dynamisch das Erscheinungsbild der Webseite, um die Darstellung für eine angenehmere Nutzung in dunklen Umgebungen anzupassen. Wir haben uns in dieses Plug-in verliebt und erachtet es entsprechend anzupassen.

Der Beitrag ist eine Erweiterung von:

WP Dunkel-Modus 10 Plug-ins im Vergleich

Night Eye Plug-in

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öchten wir das auch bejahen.

Night Eye – Dark Mode Plugin

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. Die Pro-Version enthält auch die Möglichkeit, über die Zeiteinstellung den Dunkelmodus automatisch zu aktivieren.

  • … Ja, die zusätzliche Anfrage zum Wechseln und der nachfolgenden Neuladung der Website ist für manche nicht ideal, aber dennoch akzeptabel. Nämlich 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 zu erreichen. Das sind so Anpassungen des Ajax von 'Relevanssi – A Better Search', Tabmenü, PRISM-Code, Tabellen sowie des Umschaltens von Lesemodus zu erreichen.
  • Zum Beispiel konnte das Plug-in 'Dark Mode Toggle' nicht übertreffen. Obwohl das Plug-in hier auf Wegerl.at den Wechsel vom Lesemodus und Normalmodus einmalig gut unterstützt, und fließt sogar im Zusammenspiel mit anderen Plug-ins wie Ajax/Relevanssi, Tabmenü, PRISM usw. sehr gut zusammen. Ein Manko wurde mit 'Dark Mode Toggle' jedoch sichtbar, wenn man die Website schneller scrollt – dann blitzt es weiß durch.

Schriftfarbe und Bilder anpassen

Neben der automatischen Anpassung der Farben im Dunkelmodus wären auch Anpassungen des Buchstabenabstands (letter-spacing) sehr vorteilhaft. Diese erweiterten Funktionen bietet derzeit keine der verfügbaren Plug-ins. 🙂 Daher demonstriert das Beispiel auf der Website, wie diese Anpassungen beim Wechsel zwischen hellem und dunklem Modus zu einem harmonischeren Schriftbild beitragen können. So zum Verständnis zur Lesbarkeit folge der Website leserlich.info.

Der Images so Einstellungen Low Brightness und Grayscale sind mit 'Night Eye' nicht dabei. Folgend ist das mit ein paar Zeilen CSS gemacht.

  • Zum Beispiel wie es hier der Website, da ist des Beispiels 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%);
}
}

Es kann es eine Herausforderung sein, Farben zu wählen, die einen guten Kontrast bieten und angenehm für die Augen sind.

Button (NightEyeWidget) und Positionierung

Der Button (NightEyeWidget) weist bei der Positionierung gelegentlich Unstimmigkeiten auf, vorwiegend 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;
}
}

Kontrast von Hintergrund und Schrift

Weiterhin finden wir es sinnvoll, dem Besucher die Möglichkeit zu bieten, den Kontrast von Hintergrund und Schrift etwas zu reduzieren. Hierzu können CSS und ein kleines JavaScript beitragen:

/* --- Night Eye mit Kontrast --- */

document.addEventListener("DOMContentLoaded", function() {
    const toggleElements = document.querySelectorAll('.toggle-night-mode');
    const bodyElement = document.body;

    // Funktion zum Umschalten des Nachtmodus
    function toggleNightMode() {
        if (bodyElement.classList.contains('toggle-night')) {
            bodyElement.classList.remove('toggle-night');
            localStorage.removeItem('nightMode');
        } else {
            bodyElement.classList.add('toggle-night');
            localStorage.setItem('nightMode', 'active');
        }
    }

    // Event-Listener für alle Schalter
    toggleElements.forEach(element => {
        element.addEventListener('click', toggleNightMode);
    });

    // Nachtmodus beim Laden der Seite anwenden, falls aktiviert
    if (localStorage.getItem('nightMode') === 'active') {
        bodyElement.classList.add('toggle-night');
    }
});

/* Ende Night Eye mit Kontrast */

Der Button wird über eine Classe bereitgestellt und ist somit auf einer Seite mehrfach anwendbar.

Dem Beispiel zufolge ist der Schalter nur bei aktiviertem Dunkelmodus sichtbar: Hierzu sollte im Headerbild ↑ mittels Toggle-Taste der Nachtmodus aktiviert werden.

Hier, bei aktivierten Nachtmodus KONTRAST -/+

Bei hellem Umgebungslicht ist der Unterschied allerdings kaum merkbar oder sogar disruptiv wirkt.

Durch das folgende CSS wird der Schalter nur im aktivierten Nachtmodus sichtbar. Außerdem ist das CSS so ausgelegt, dass es mit dem Schalter in der Headerzeile passend ist:

/* --- Kontrast-Schalter nur bei Nachtmodus visuell --- */

/* toggle night mode */
.toggle-night-mode {
    display: none;
}

[nighteyeplgn="active"] .toggle-night-mode:not(.header-main) {
  display: block;
	display: inline;
	top: 0px;
	list-style: none;
    display: inline-block;
    vertical-align: middle;
}

.menu-item {
    list-style: none;
    display: inline-block;
    vertical-align: middle; 
}

/* Ende Kontrast-Schalter nur bei Nachtmodus visuell */

Zum CSS der Kontrastfarbe:

/* Stile für Kontrast (bspw. Einstellung Dark 10:1) 9:1 #2C3545, 8:1 #333D4E, heller 7:1 #3A4559, 6:1 #434F65. */

[nighteyeplgn="active"] .toggle-night #content, 
[nighteyeplgn="active"] .toggle-night .entry-content {
	background: #2C3545 !important;
}

Night Eye Dialog stylen

Der Night Eye Dialog wird durch Anklicken des Night Eye Widgets aufgerufen, mit dem man den Modus wechseln kann. In den Einstellungen, unter dem Bereich 'Content', kann beliebiger Inhalt gespeichert werden, zum Beispiel:

<span class="boldes" style="font-size: 1.1em;">Genieße die Schönheit der Dunkelheit
oder die Schönheit von Helligkeit.
</span>

<img class="wp-image-237431 aligncenter" role="img" src="https://..OpenClipart-Vectors-owl-eye" alt="" width="125" height="175" />
<span style="font-size: 1rem;">Dunkelmodus von</span>
<a class="no-icon" href="https://plugins.nighteye.app/client/login" target="_blank" rel="noopener"><img class="aligncenter" title="NIGHT EYE PLUGINS" role="img" src="https://plugins.nighteye.app//src/view/rs/img/logos/nigh-eye-logo.png" alt="" width="140" height="38" /></a>

Punkt, Punkt, Komma, Strich, fertig ist das Wunschprofil:

/* --- Dialog-Schalter Night Eye --- */

.NightEyeDialog {
	height: 525px;
}

@media (max-width: 375px) {
.NightEyeDialog {
	height: 570px;
}
}

.NightEyeDialog .NightEyeTitle {
	font-family: 'Architects Daughter', cursive;
	color: #3a7bb3cc;
	margin-bottom: 20px;
}

.NightEyeToggleButton {
	margin-top: -330px;
}

.NightEyeToggleButton > .switchNE .sliderNE.roundNE {
	background: #4b8fd2cc;
	box-shadow: 0px 0px 100px #2196f3;
}

/* Ende Dialog Night Eye */

Kein Beitrag, bei dem wir nicht nebenher etwas dazulernen. Hier ist das mit dem Selektor (>):

.NightEyeToggleButton > .switchNE .sliderNE.roundNE

Das würde dem box-shadow ohne die Definition des Kind-Selektors > nicht funktionieren.

Dieses CSS-Snippet wendet die angegebenen Stile nur dann an, wenn .switchNE ein direktes Kind von .NightEyeToggleButton ist und .sliderNE ein Kind von .switchNE ist (es kann ein direktes oder ein indirektes Kind sein).

Erklärung:

.NightEyeToggleButton > .switchNE .sliderNE.roundNE

bedeutet:

  • .switchNE ist ein direktes Kind von .NightEyeToggleButton.
  • .sliderNE.roundNE ist ein Kind von .switchNE (es kann ein direktes oder ein indirektes Kind sein).

Hier ist die entsprechende HTML-Struktur:

<div class="NightEyeToggleButton">
    <div class="switchNE">
        <div class="sliderNE roundNE"></div>
    </div>
</div>

Diese Struktur sorgt dafür, dass die Stile korrekt angewendet werden.

Button (NightEyeWidget) zeigte Aufblitzer in Verbindung mit Preloader

Das ist ein spezifisches Problem, welches in Verbindung mit einem Preloader auftreten kann. Mit Neuladung der Website war ein aufblitzender Effekt des Night Eye Widget.

Der Button wird 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)
        }
    }
});

InfoZusä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 Plug-in hat hier seinen Platz gefunden! –
weil es Vorteile bietet, die oft nicht sofort erkennbar sind.

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. Hier können Sie sich für Night Eye WP Pro registrieren.

Dark-Mode-Plug-ins verbrauchen Ressourcen

Das ist eine Information, die man beachten sollte, um objektiv zu sein. Folgend handelt es sich um Messergebnisse, welche 'Lighthouse' bereitstellt.

Die Dark-Mode-Plug-ins verbrauchen Ressourcen, was hinzunehmen ist. Das Plug-in Night Eye ist sehr performant, auch wenn 'Lighthouse' bemängelt: "Verhindern, dass in modernen Browsern veraltetes JavaScript bereitgestellt wird". Ja, da ist die Datei night-eye-pro/Views/assets/v-public/view/startup-page/bundle.js dabei.

Was ich folgendem TEST noch hinzufügen möchte: Auf der Website ist auch Boxzilla aktiviert, und beim Erstbesuch erscheint immer ein Pop-up. Beispielsweise kostet 'Boxzilla' etwa 2 bis 3 Leistungspunkte, also in etwa dasselbe wie Night Eye an Ressource braucht.

Zum Zeitpunkt des Tests sahen die Ergebnisse folgendermaßen aus:

Ohne Boxzilla
Ohne Night Eye
97 Punkte
Mit Boxzilla
Ohne Night Eye
95 Punkte, also 2 Punkte weniger durch Boxzilla.
Mit Boxzilla
Mit Night Eye
93 Punkte,
also 2 Punkte weniger durch Night Eye.
  • Allgemein lässt sich zur Leistung sagen, dass Night Eye etwa 2 bis 3 Punkte kostet, wobei die Messergebnisse wie üblich manchmal schwanken.

Dark-Mode-Plug-ins verbrauchen Ressourcen, wie alle Plug-ins mit Features für das Frontend. Worauf es bei der Auswahl des richtigen Dunkelmodus-Plug-ins ankommt, ist das Zusammenspiel mit der Website und somit die Zufriedenheit der Nutzer*innen 🙂


Es bleibt die Frage, warum nur über 100 Benutzer*innen 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.

wp wegerl.at

Der Beitrag wurde mit fachlicher Unterstützung erstellt.


Aktualisiert im Jahr 2024 Juli