Werbung

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

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.

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.

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.

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

---

Der Dunkelmodus oder Dark-Modus wird durch das 'Night Eye'-Plug-in im Browser mittels spezieller CSS-Stile und Anpassungen realisiert. 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 halten es für sinnvoll, es entsprechend anzupassen. Dazu gehören Anpassungen von Schriftfarbe und Bildern sowie der separate Kontrast, und der Shortcode, um den NightEyeDialog aufzurufen.

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-Plug-in

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.

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

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

• Anmerkung: Der Button zum Aufruf des NightEyeDialog ist auf dieser Website vollständig mit display: none ausgeblendet, da wir den Button in der Headerzeile anbieten. Siehe weiter unten unter der Überschrift: "NightEyeDialog über Shortcode".

Der Button (NightEyeWidget) weist bei der Positionierung gelegentlich Unstimmigkeiten auf, vorwiegend wenn er anders als oben und unten ausgerichtet werden soll. Dieses Problem wurde 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;
    }
}

NightEyeDialog stylen

Der NightEyeDialog wird durch Anklicken des NightEyeWidgets 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="aligncenter wp-image-237548 size-full" style="margin-top: 95px; margin-bottom: 25px;" role="img" src="https://wegerl.at/wp-content/uploads/2024/07/OpenClipart-Vectors-owl-dialog.jpeg" alt="Eule" width="125" height="175" loading="eager" />
<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" loading="eager" /></a>

Im HTML ist darauf zu achten, dass bei den Bildern das Attribut loading="eager" verwendet wird. Dadurch werden die Bilder ohne Verzögerung geladen, was das Lazy Loading verhindert und so zu einer flüssigen Visualisierung beiträgt.

Ähnlich verhält es sich mit dem folgenden CSS, das position: absolute; verwendet. Dadurch wird die Position des NightEyeToggleButtons präzise festgelegt und effizient ausgerichtet. Eine einfachere, aber weniger konforme Alternative wäre, position: absolute; wegzulassen und stattdessen margin-top: -123px; mit einer Anpassung über @media zu nutzen. Dies könnte jedoch beim Aufruf des NightEyeDialogs zu einer unruhigen Darstellung des Buttons führen.

• Um sicherzustellen, dass das folgende CSS durchgehend wirksam ist, sollte es entweder im Customizer oder über die im Linkhinweis gezeigte Alternative angewendet werden. Dies betrifft besonders die Darstellung auf Mobilgeräten.

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

/* NightEyeDialog */

.NightEyeDialog {
	height: 525px;
	max-width: 400px;
}

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

.NightEyeDialog .NightEyeTitle {
	color: #3a7bb3cc;
	margin-bottom: 20px;
}

@media (max-width: 424px) {
.NightEyeDialog .NightEyeTitle {
	font-size: 22px;
	}
}

@media (max-width: 374px) {
.NightEyeToggleButton {
	position: absolute;
    top: 24%; 
    left: 22%;
}
}

@media (min-width: 375px) and (max-width: 424px) {
	.NightEyeToggleButton {
	position: absolute;
	top: 26%; 
    left: 26%;
}
}

@media (min-width: 425px) and (max-width: 767px) {
	.NightEyeToggleButton {
	position: absolute;
	top: 22%; 
    left: 29%;
}
}

@media (min-width: 768px) {
.NightEyeToggleButton {
	position: absolute;
	top: 22%; 
    left: 30%;
}
}

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

/* Ende NightEyeDialog */

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

.NightEyeToggleButton > .switchNE .sliderNE.roundNE

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

Optimierung des Bildladeverhaltens im NightEyeDialog

Wenn man dem NightEyeDialog wie im Beispiel auch so Bildchen einpflegt und allein die Auszeichnung im Bild mit Attribut loading="eager" nicht so erfolgreich ist, dann könnte man mit JS das Preloading des Bildchens forcieren, aber lese danach weiter:

/* --- NightEyeDialog, Bild preloading --- */

window.addEventListener('load', () => {
    setTimeout(() => {
        const img1 = new Image();
        img1.src = 'https://../OpenClipart-Vectors-owl-dialog.jpeg';
        
        const img2 = new Image();
        img2.src = 'https://../nigh-eye-logo.png';
        
        img1.onload = () => {
            console.log('First image preloaded');
        };
        
        img2.onload = () => {
            console.log('Second image preloaded');
        };
        
        img1.onerror = () => {
            console.error('Failed to preload the first image');
        };
        
        img2.onerror = () => {
            console.error('Failed to preload the second image');
        };
    }, 100); // Verzögerung von 100 ms nach Seitenladung
});

/* - Ende NightEyeDialog Bild ohne Lazy Loading + Bild preloading - */

Aber so richtig "stick" wird es damit auch nicht, egal wie man es dreht und wendet. Bleibt nur ein Base64-kodiertes Bild: Damit sollte beim Aufruf des NightEyeDialogs alles "sticken"! 🙂

^{"Stick" stammt aus dem Turnjargon und bedeutet, dass ein Turner nach einer akrobatischen Bewegung so landet, dass er stabil und ohne Nachschwung stehen bleibt.}

Die beiden Bilder wurden zunächst so optimiert, dass ihre Größe passend ist und sie nicht unnötig viel Speicherplatz beanspruchen. Komprimiert zusammen ergeben sie 10 KB. Dennoch kann die Ladezeit bei so kleinen Dateien manchmal störend wirken. Daher haben wir die beiden Bilder in Base64 konvertiert, was sie zusammen auf 13 KB vergrößert. Da sie nun direkt im HTML eingebettet sind, ist keine Verzögerung beim Seitenaufbau spürbar, und der NightEyeDialog erscheint dadurch sehr flüssig.

• Base64-Bilder können nützlich sein, um kleine Ressourcen direkt im Code einzubetten und somit zusätzliche HTTP-Anfragen zu vermeiden.
• Ideal für kleine Bilder wie Icons oder Platzhalter, die oft schnell verfügbar sein müssen.
• Nicht für große Bilder empfohlen, da die Base64-Kodierung die Dateigröße erhöht und den Code unübersichtlich machen kann.

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:

/* --- NightEyeWidget: Mit CSS ist ausblendet, und seitenspezifisch mit JS einblenden --- */

document.addEventListener("DOMContentLoaded", () => {
    const nightEyeWidget = document.querySelector('.NightEyeWidget');
    if (nightEyeWidget) {
        const isHomepage = document.body.classList.contains('home');
        const isBlog = document.body.classList.contains('blog');
        const isSinglePost = document.body.classList.contains('single');
        const isContactPage = document.body.classList.contains('page-id-123'); // Bspw., ob es sich um die Kontaktseite handelt

        if (!(isHomepage || isBlog || isSinglePost || isContactPage)) {
            // NightEyeWidget auf Seiten ausblenden, die nicht die Startseite, Blog, einzelne Beiträge oder die Kontaktseite sind
            nightEyeWidget.style.display = 'none';
        } else {
            // Nach einer gewissen Zeit das NightEyeWidget wieder anzeigen
            setTimeout(() => {
                nightEyeWidget.style.display = 'block'; // Anzeigen des NightEyeWidgets
            }, 500); // Hier kannst du die Zeit in Millisekunden festlegen (z.B. 1000 für 1 Sekunde)
        }
    }
});

/* - Ende NightEyeWidget: Mit CSS ist ausblendet, und seitenspezifisch mit JS einblenden - */

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.

Folgendem ist ohne Ausschlüsse, also der gesamten Website:

/* --- NightEyeWidget: Mit CSS ist ausblendet, und mit JS einblenden --- */

document.addEventListener("DOMContentLoaded", () => {
    const nightEyeWidget = document.querySelector('.NightEyeWidget');
    if (nightEyeWidget) {
        setTimeout(() => {
            nightEyeWidget.style.display = 'block';
        }, 500);
    }
});

/* - Ende NightEyeWidget: Mit CSS ist ausblendet, und mit JS einblenden - */

🧡 Kontrast zwischen Hintergrund und Schrift variierbar

Weiterhin finden wir es sinnvoll, dem Besucher die Möglichkeit zu bieten, den Kontrast von Hintergrund und Schrift anzupassen. Die Funktion basiert grundsätzlich auf der normalen Visualisierung, wie sie von Night Eye bereitgestellt wird.

Bereit für Anpassungen?
Sei auf unterschiedliche Aspekte vorbereitet!

1. Mit dem ersten Klick auf die Schaltfläche wird der Selektor .toggle-night angewendet.
2. Ein weiterer Klick aktiviert den Selektor .toggle-contrast.
3. Ein dritter Klick stellt wieder die grundlegende Einstellung her.

Dem Beispiel zufolge ist der Schalter nur bei aktiviertem Dunkelmodus sichtbar, das kann hier: Licht Ein/Aus oder in der Headerzeile ↑ mittels Toggle-Taste aktiviert werden.

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

Hierzu können CSS und JavaScript beitragen:

/* --- NightEye: Kontrast variabel --- */

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

	// Funktion zum Umschalten der Modi
	function toggleModes() {
		if (bodyElement.classList.contains('toggle-contrast')) {
			// Wenn der Kontrastmodus aktiv ist, auf Normalmodus wechseln
			bodyElement.classList.remove('toggle-contrast');
			bodyElement.classList.add('toggle-normal');
			localStorage.setItem('mode', 'normal');
		} else if (bodyElement.classList.contains('toggle-night')) {
			// Wenn der Nachtmodus aktiv ist, auf Kontrastmodus wechseln
			bodyElement.classList.remove('toggle-night');
			bodyElement.classList.add('toggle-contrast');
			localStorage.setItem('mode', 'contrast');
		} else if (bodyElement.classList.contains('toggle-normal')) {
			// Wenn der Normalmodus aktiv ist, auf Nachtmodus wechseln
			bodyElement.classList.remove('toggle-normal');
			bodyElement.classList.add('toggle-night');
			localStorage.setItem('mode', 'night');
		} else {
			// Wenn kein Modus aktiv ist, Normalmodus aktivieren
			bodyElement.classList.add('toggle-normal');
			localStorage.setItem('mode', 'normal');
		}
	}

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

	// Modus beim Laden der Seite anwenden, falls aktiviert
	const savedMode = localStorage.getItem('mode');
	if (savedMode === 'night') {
		bodyElement.classList.add('toggle-night');
	} else if (savedMode === 'contrast') {
		bodyElement.classList.add('toggle-contrast');
	} else if (savedMode === 'normal') {
		bodyElement.classList.add('toggle-normal');
	} else {
		// Kein gespeicherter Modus, daher sicherstellen, dass der Normalmodus aktiv ist
		bodyElement.classList.add('toggle-normal');
		localStorage.setItem('mode', 'normal');
	}
});

/* - Ende NightEye: Kontrast variabel - */

Falls nur ein Selektor (.toggle-night) bevorzugt wird, wie folgt:

/* --- 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.

Der Kontrast-Schalter

Durch das folgende CSS wird der Schalter nur im aktivierten Nachtmodus sichtbar. Außerdem ist das CSS so gestaltet, dass es hier zur Website passt und in der Headerzeile platziert ist. Gegebenenfalls muss es individuell angepasst werden:

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

Wie das des HTML konkret zu verarbeiten ist unterhalb im Abschnitt 'Individuelle Links' im Menü.

CSS Beispiel zur Kontrastfarbe

/* === Night Eye: Stile für Kontrast === */

/* -- Stile Background -- */

/* Stile für Selektor .toggle-night */
[nighteyeplgn="active"] .toggle-night #content,
[nighteyeplgn="active"] .toggle-night .entry-content {
    background: #2c3545 !important;
}

/* Stile für Selektor .toggle-contrast, teils spezifisch für Theme 20/14 */
[nighteyeplgn="active"] .toggle-contrast {
    #content,
    .content-area,
    .entry-content,
    .header-main,
    .search-toggle,
    .site-info,
    #secondary,
    #content-sidebar,
    #footer-sidebar,
    .site-footer,
    .site-info,
    .site::before,
    .widget.widget_recent_entries a,
    .widget.mw_lastupdated a,
    .widget-area a {
        background: #3a3a3a !important;
    }
}

/* - Ende Stile Background - */

/* -- Stile für Text -- */

/* Night Eye: Dark-Theme, Kontrast (color: #CCC5BC = angepasst) 8,28:1 (background: #2B2B2B = Theme Dark) */
[nighteyeplgn="active"] .entry-content p,
[nighteyeplgn="active"] .entry-content li {
    color: #ccc5bc !important;
    letter-spacing: 0.4px;
    font-weight: 400;
}

/* Stile für Selektor .toggle-night 
(color: #D1CAC1) 7,6:1 (background: #2C3545),
(color: #CCC5BC) 7,21:1 (background: #2C3545)
 */
[nighteyeplgn="active"] .toggle-night .entry-content p,
[nighteyeplgn="active"] .toggle-night .entry-content li {
    color: #ccc5bc !important;
}

/* Stile für Selektor .toggle-contrast
(color: #D1CAC1) 7:1 (background: #3A3A3A) */
[nighteyeplgn="active"] .toggle-contrast .entry-content p,
[nighteyeplgn="active"] .toggle-contrast .entry-content li {
    color: #d1cac1 !important;
}

/* - Ende Stile für Text - */

/* = Ende Night Eye: Stile für Kontrast = */

• Ein Aspekt für die Lesbarkeit von Texten ist der Kontrast zwischen Text und Hintergrund: Kontrastoptimierung für optimale Lesbarkeit.

Perfekte Anpassung: Variiere Farben und Kontraste,
steuer den NightEyeDialog per Shortcode und Tastatur!

🧡 NightEyeDialog über Shortcode

Das NightEyeWidget ist nicht immer die optimale Lösung. Daher haben wir einen Shortcode erstellt, insbesondere weil dieser in der Headerleiste sehr trefflich ist.

Code für die functions.php:

/* ––– NightEye Shortcode (Class) ––– */

function clickable_nighteye_shortcode() {
    return '<span aria-label="NightEye Swippe" tabindex="0" role="button" aria-pressed="false" class="focusable clickable-nighteye clickableNightEye">
                Licht Ein/Aus
            </span>';
}
add_shortcode('clickable_nighteye', 'clickable_nighteye_shortcode');

function enqueue_custom_scripts() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            var clickableNightEyeElements = document.querySelectorAll('.clickableNightEye');
            clickableNightEyeElements.forEach(function(clickableNightEye) {
                clickableNightEye.addEventListener('click', function () {
                    triggerNightEyeWidgetClick();
                });

                clickableNightEye.addEventListener('keydown', function (event) {
                    if (event.key === 'Enter') {
                        triggerNightEyeWidgetClick();
                    }
                });
            });

            function triggerNightEyeWidgetClick() {
                var widget = document.querySelector('.NightEyeWidget.NightEyePositionLeft');
                if (widget) {
                    var event = new MouseEvent('click', {
                        bubbles: true,
                        cancelable: true,
                        view: window
                    });
                    widget.dispatchEvent(event);
                }
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'enqueue_custom_scripts');

/* – Ende NightEye Shortcode – */

Der Shortcode lautet [clickable_nighteye] oder so per Class:

<span class="focusable clickable-nighteye clickableNightEye"> Licht Ein/Aus </span>

CSS kann von Vorteil sein:

/* Schaltfläche für NightEye Shorcode  */

.focusable.clickable-nighteye {
    display: inline-block; /* Den gesamten Block klickbar machen */
    padding: 10px 20px; /* Erhöhe die Klickfläche durch Polsterung */
    cursor: pointer; /* Zeigt an, dass es sich um ein klickbares Element handelt */
}

Wenn man den Shortcode lieber per ID erhält, dann ist dieser Code:

/* ––– NightEye Shortcode (ID) --- */

function clickable_nighteye_shortcode() {
    return '<span aria-label="NightEye Swippe" tabindex="0" role="button" aria-pressed="false" class="focusable clickable-nighteye" id="clickableNightEye">
                <i class="i-class icon-IcoMoon"></i>Licht Ein/Aus
            </span>';
}
add_shortcode('clickable_nighteye', 'clickable_nighteye_shortcode');

function enqueue_custom_scripts() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            var clickableNightEye = document.getElementById('clickableNightEye');
            if (clickableNightEye) {
                clickableNightEye.addEventListener('click', function () {
                    triggerNightEyeWidgetClick();
                });

                clickableNightEye.addEventListener('keydown', function (event) {
                    if (event.key === 'Enter') {
                        triggerNightEyeWidgetClick();
                    }
                });
            }

            function triggerNightEyeWidgetClick() {
                var widget = document.querySelector('.NightEyeWidget.NightEyePositionLeft');
                if (widget) {
                    var event = new MouseEvent('click', {
                        bubbles: true,
                        cancelable: true,
                        view: window
                    });
                    widget.dispatchEvent(event);
                }
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'enqueue_custom_scripts');

/* – Ende NightEye Shortcode (ID) - */

Kommentar zur Erstellung des Shortcodes durch ChatGPT: Zuerst wurden verschiedene Ansätze probiert, die sich als umständlich erwiesen und nicht zum Erfolg führten. Erst der Hinweis an ChatGPT, einfach dem NightEyeWidget einen Klick zu geben, brachte bald Erfolg.

🧡 Tastaturnavigation bedienbar machen

Für die Benutzererfahrung kann es weiterhin wichtig sein, dass die Tastaturnavigation integriert ist. Dies betrifft auf dieser Website die Headerzeile mit den Buttons ('Kontrast +/-', 'Licht An/Aus', 'Lesemodus' und den Schriftgrößen-Resizer).

• Weiteres im Aritkel: Tastaturnavigation: Fokussierung und Interaktion mit JavaScript

Tastaturnavigantion: Menü in der Headerzeile + NightEyeToggleButton

Der Code Funktioniert nur zusammen, also der Tastaturnavigation und der ToggleButton.

Hier ist das JavaScript-Beispiel:

/* ––– Tastaturnavigation Headerzeile + NightEyeToggleButton ––– */

document.addEventListener('DOMContentLoaded', function() {
    const body = document.body;
    let toggleButtonSetupDone = false;

    function handleFirstTab(event) {
        if (event.key === 'Tab') {
            body.classList.add('keyboard-focused');
            window.removeEventListener('keydown', handleFirstTab);
            window.addEventListener('mousedown', handleMouseDown);
        }
    }

    function handleMouseDown() {
        body.classList.remove('keyboard-focused');
        window.removeEventListener('mousedown', handleMouseDown);
        window.addEventListener('keydown', handleFirstTab);
    }

    window.addEventListener('keydown', handleFirstTab);

    document.querySelectorAll('.focusable').forEach(button => {
        button.addEventListener('keydown', function(event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                button.click();
            }
        });
    });

    function setupToggleButton() {
        if (toggleButtonSetupDone) return;
        toggleButtonSetupDone = true;

        const toggleCheckbox = document.querySelector('.NightEyeToggleButton input[type="checkbox"]');
        if (toggleCheckbox) {
            toggleCheckbox.setAttribute('tabindex', '0');
            toggleCheckbox.focus(); // Fokus auf den Toggle-Button setzen

            toggleCheckbox.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    event.stopPropagation();
                    toggleCheckbox.checked = !toggleCheckbox.checked;
                    toggleCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
                }
            });
        }
    }

    function addDialogOpenListener() {
        const nightEyeWidget = document.querySelector('.NightEyeWidget');
        if (nightEyeWidget) {
            nightEyeWidget.addEventListener('click', function(event) {
                setupToggleButton();
            }, { once: true }); // Der Event-Listener wird nur einmal ausgeführt
        }
    }

    // Listener für Enter auf dem NightEyeWidget
    window.addEventListener('keydown', function(event) {
        if (event.key === 'Enter' && document.activeElement.classList.contains('NightEyeWidget')) {
            event.preventDefault(); // Verhindert das Standardverhalten
            document.activeElement.click(); // Simuliert den Klick auf das Widget
            
            // Verzögerung einfügen, um sicherzustellen, dass der Dialog vollständig geöffnet ist
            setTimeout(() => {
                setupToggleButton();
            }, 300); // Erhöhte Verzögerung auf 300ms
        }
    });

    // Event-Listener erneut hinzufügen, wenn die Seite wieder sichtbar wird
    document.addEventListener('visibilitychange', function() {
        if (document.visibilityState === 'visible') {
            addDialogOpenListener(); // Event-Listener erneut hinzufügen
        }
    });

    addDialogOpenListener();
});

/* ––– Ende Tastaturnavigation Headerzeile + NightEyeToggleButton ––– */

CSS-Vorschlag zur Tastaturnavigation

… unserem CSS Beispiel für Twenty Fourteen Theme:

/* --- Tastaturfokus ––– */
/* Standard-Fokus-Stil Browsers entfernen */
.focusable:focus {
    outline: none;
}

.keyboard-focused .focusable:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(33, 117, 155, 0.6);
    /*outline-style: dotted;*/
    outline: thin dotted;
    color: #21759b;
    font-weight: bold;
    padding: 12px 20px;
}

/* Theme spezifisch 20/14 */
.screen-reader-text:focus {
    box-shadow: 0 0 2px 2px rgba(33, 117, 155, 0.6) !important;
    font-size: 15px;
    padding: 12px 20px !important;
}

/* - Ende Tastaturfokus – */

Separates CSS ist für den ToggleButton nicht erforderlich, da man davon ausgehen kann, dass mit Shift oder Enter der Wechsel vollzogen wird.

Das HTML der Buttons

Die beiden Buttons im HTML könnten wie folgt aussehen:

<span class="focusable toggle-night-mode" aria-label="KONTRAST -/+" tabindex="0" role="button">
    <i class="i-kontr icon-icon-brightness"></i>KONTRAST +/-
</span>

<span class="focusable clickable-nighteye clickableNightEye" aria-label="Tag- Nachtmodus" tabindex="0" role="button">
    <i class="i-licht icon-switch"></i> L i c h t Ein/Aus
</span>

Die Verwendung von class="focusable", aria-label, tabindex, und role, bezieht sich meist auf die Barrierefreiheit (Accessibility) und die Verbesserung der Nutzererfahrung, insbesondere für Benutzer, die auf Tastaturnavigation oder Screenreader angewiesen sind.

'Individuelle Links' im Menü: CSS-Classen richtig einsetzen

Die Verwendung der Funktion 'CSS-Klassen (optional)' im WordPress-Menü-Editor ermöglicht es, Classen direkt auf Menü-Elemente anzuwenden, ohne zusätzliche manuelle CSS-Anpassungen im Code vornehmen zu müssen.

Wenn die Funktionen im Menü korrekt anklickbar sein sollen, ist es wichtig, die Classen wie toggle-night-mode, clickable-nighteye clickableNightEye usw. im Widget 'Individuelle Links' im dafür vorgesehenen Bereich 'CSS-Klassen (optional)' einzutragen. Dadurch sind keine zusätzlichen, potenziell problematischen CSS-Anweisungen wie display: inline-block; erforderlich, was Konflikte und Darstellungsprobleme vermeiden kann.

Im Menü 'Individuelle Links'

Hier zeigen wir, wie die Buttons zu erstellen sind.

Kontrast-Button:

Angezeigter Name

<span class="focusable toggle-night-mode" aria-label="KONTRAST -/+" tabindex="0" role="button"><i class="i-kontr icon-icon-brightness"></i> KONTRAST +/- </span>

CSS-Klassen (optional)
toggle-night-mode

• Anmerkung: In diesem Beispiel ist die Classe toggle-night-mode doppelt vorhanden, da dies für das Styling zur Aus- und Einblendung erforderlich ist. Erstaunlicherweise funktioniert das CSS für die Aus- und Einblendung nicht, wenn die Classe nur unter 'CSS-Klassen (optional)' eingetragen ist.

NightEye-Button:

Angezeigter Name

<span class="focusable" aria-label="Tag- Nachtmodus" tabindex="0" role="button"> <i class="i-licht icon-switch"></i> L i c h t Ein/Aus </span>

CSS-Klassen (optional)
clickable-nighteye clickableNightEye

Das CSS zum aus- und einblenden des 'Kontrast-Buttons':

/* --- Kontrast-Button aus- einblenden --- */

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

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

/* - Ende Kontrast-Button aus- einblenden - */

Der Kontrast-Button wird im Tagmodus nicht visuell, während er im Nachtmodus aktiviert ist.

/* Icon-Fonts fontello */

@font-face {
    font-family: "fontello";
    src: url("icon-fonts/fontello.eot?19935858");
    src: url("icon-fonts/fontello.eot?19935858#iefix")
            format("embedded-opentype"),
        url("icon-fonts/fontello.woff2?19935858") format("woff2"),
        url("icon-fonts/fontello.woff?19935858") format("woff"),
        url("icon-fonts/fontello.ttf?19935858") format("truetype"),
        url("icon-fonts/fontello.svg?19935858#fontello") format("svg");
    font-weight: normal;
    font-style: normal;
}

.icon-moon:before {
    content: "\e800";
}
.icon-icon-lesen:before {
    content: "\e801";
}
.icon-resizer:before {
    content: "\e802";
}
.icon-switch:before {
    content: "\e803";
}
.icon-icon-brightness:before {
    content: "\e804";
}

.header-main i {
    /* Verwendung! Wichtig, um Probleme mit Browser -Erweiterungen zu verhindern, die Schriftarten ändern */
    font-family: "fontello";
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Indivisuelles Styling */
.i-kontr {
    position: relative;
    top: 2px;
    margin-right: 6px;
    font-size: 24px;
}

.i-licht {
    position: relative;
    top: 4px;
    margin-right: 6px;
    font-size: 24px;
}

.i-lesen {
    position: relative;
    top: 6px;
    margin-right: 6px;
    font-size: 30px;
    font-weight: 900;
}

.i-norm {
    position: relative;
    top: 1.5px;
    margin-right: 6px;
    font-size: 16px;
}

.i-mitte {
    position: relative;
    top: 3px;
    margin-right: 6px;
    font-size: 20px;
}

.i-gross {
    position: relative;
    top: 4.2px;
    margin-right: 6px;
    font-size: 24px;
}

/* – Ende Icon Fonts – */

Entwicklungsteil

Es gab ein Problem, als der Code so konfiguriert war, dass das JavaScript für den Toggle-Button erst geladen wurde, nachdem der Dialog aufgerufen wurde. Dieses Problem trat auf, wenn die Enter-Taste zweimal verwendet wurde – einmal zum Öffnen des Dialogs und ein zweites Mal für den Toggle-Button. Dies betraf insbesondere die Interaktion mit der Enter-Taste.

Interessanterweise funktionierten die anderen Kombination für das Öffnen des Dialogs und die Interaktion mit dem Toggle-Button wie vorgesehen, ohne das beschriebene Problem zu verursachen.

Hier sind die beiden Code-Segmente, die nur teilweise wie beschrieben funktionieren:

/* ––– Tastaturnavigantion Headerzeile ––– */

document.addEventListener('DOMContentLoaded', function() {
    const body = document.body;

    function handleFirstTab(event) {
        if (event.key === 'Tab') {
            body.classList.add('keyboard-focused');
            window.removeEventListener('keydown', handleFirstTab);
            window.addEventListener('mousedown', handleMouseDown);
        }
    }

    function handleMouseDown() {
        body.classList.remove('keyboard-focused');
        window.removeEventListener('mousedown', handleMouseDown);
        window.addEventListener('keydown', handleFirstTab);
    }

    window.addEventListener('keydown', handleFirstTab);

    document.querySelectorAll('.focusable').forEach(button => {
        button.addEventListener('keydown', function(event) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                button.click();
            }
        });
    });
});

/* – Ende Tastaturnavigantion Headerzeile – */

Folgend die separate Tastaturnavigantion für Toggle-Button: Der Code ist so strukturiert, dass er nur aktiv wird, wenn der NightEyeDialog geöffnet wird, was Ressourcen spart und unnötige Event-Listener vermeidet. Das Separieren des Codes würde sinnvoll, da er nur ausgeführt wird, wenn die spezifische Interaktion mit dem NightEyeDialog stattfindet.

/* --- Tastaturnavigantion für NightEyeToggleButton --- */

document.addEventListener('DOMContentLoaded', function() {
    function setupToggleButton() {
        const toggleCheckbox = document.querySelector('.NightEyeToggleButton input[type="checkbox"]');
        if (toggleCheckbox) {
            toggleCheckbox.setAttribute('tabindex', '0');
            
            // Event-Listener für Enter-Taste hinzufügen
            toggleCheckbox.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    event.preventDefault(); // Verhindert die Standardaktion
                    toggleCheckbox.checked = !toggleCheckbox.checked;
                    toggleCheckbox.dispatchEvent(new Event('change', { bubbles: true }));
                }
            });

            // Fokus auf das Kontrollkästchen setzen
            toggleCheckbox.focus();
        }
    }

    function addDialogOpenListener() {
        const nightEyeWidget = document.querySelector('.NightEyeWidget');
        if (nightEyeWidget) {
            nightEyeWidget.addEventListener('click', function() {
                setupToggleButton();
            });
        }
    }

    addDialogOpenListener();
});

/* - Ende Tastaturnavigantion für NightEyeToggleButton - */

Und vielen Dank an ChatGPT!

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 Leistungspunkte, also in etwa dasselbe wie Night Eye an Ressource braucht.

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

• Allgemein lässt sich zur Leistung sagen, dass Night Eye etwa 2 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 🙂

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.

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.

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 August