Light Mode vs Dark Mode in PWA App:
Optimierung der Benutzerfreundlichkeit für beide Alternativen

Machen Sie Ihre Progressive Web App fit für den Dark und Light Mode: ein Überblick

Progressive Web-Apps (PWAs) verändern das Nutzererlebnis, indem sie eine App-ähnliche Oberfläche in einer Browserumgebung bieten. Diese Webanwendungen bieten mehrere Vorteile in Bezug auf Benutzerbindung, Geschwindigkeit und Design, was sie zu einem unverzichtbaren Werkzeug für moderne Websites macht.

Eine der am meisten geschätzten Funktionen von PWAs ist die Möglichkeit, zwischen hellen und dunklen Modi zu wechseln, was den visuellen Komfort erhöht und die Lesbarkeit der Inhalte bei unterschiedlichen Lichtverhältnissen gewährleistet. Bei der Debatte um den hellen und den dunklen Modus geht es nicht nur um Ästhetik. Die Wahl zwischen hellem und dunklem Modus ist nicht nur eine Frage der persönlichen Vorliebe. Sie ist auch mit einer verbesserten Geräteinteraktion verbunden, die es den Nutzern ermöglicht, ihr Surferlebnis je nach natürlichem Licht, Umgebungslicht oder ihrer Umgebung anzupassen.

Passen Sie Ihr WordPress-Theme oder Joomla-Template für Ihre PWA an

Die Gestaltung einer PWA zur Berücksichtigung der Benutzerpräferenz für Farbschemas beinhaltet die Einbeziehung von CSS-Eigenschaften und Medienabfragen in das Webdesign. Die Medienabfrage prefers color scheme erkennt die Systemeinstellungen des Benutzers und stellt den entsprechenden hellen oder dunklen Farbmodus bereit. Hier ist ein Beispiel, wie es in Ihrem WordPress Theme oder Joomla Template implementiert werden kann:

:root {
 --box-background: hsl(49, 100%, 50%);
}

@media (prefers-color-scheme: light) {
:root {
 --box-background: hsl(49, 100%, 50%);
}
}

@media (prefers-color-scheme: dark) {
:root {
 --box-background: hsl(49, calc(100% * 0.6), calc(50% * 0.25));
}
}

.box {
 background-color: var(--box-background)
}

Durch die Anpassung von CSS-Variablen können Entwickler Farbthemen definieren, die dynamisch auf die Präferenzen der Benutzer reagieren. Außerdem kann JavaScript eingesetzt werden, um mit diesen Einstellungen weiter zu interagieren:

const darkTheme = window.matchMedia('(prefers-color-scheme: dark)')
 

Dark und Light Mode für das PWA Manifest möglich?

Ferne spielt das PWA Manifest eine entscheidende Rolle bei der Definition des Erscheinungsbildes der Webanwendung, einschließlich Aspekten wie theme_color, das die Farbe von UI-Elementen wie der Statusleiste beeinflusst, und background_color, das die Ästhetik des Startbildschirms der Anwendung diktiert, der nur einen hellen Hintergrund hat. Die Anpassung dieser Elemente ist für die Schaffung einer nahtlosen und integrierten Benutzererfahrung unerlässlich.

Leider können die Theme Color und die Background Color nicht über die PWA-Manifestdatei definiert werden. Es gibt ein "open issue" mit dem Thema: "Unterstützung für die Definition einer Themenfarbe für helle und dunkle Modi hinzufügen (bevorzugtes Farbschema). Infolgedessen entscheiden Sie sich entweder für einen Modus oder finden einen Mittelweg, der dem Corporate Design des hellen und dunklen Modus entspricht. Die andere Möglichkeit besteht darin, die PWA mit benutzerdefiniertem JavaScript zu erweitern, das das Manifest der Progressive Web App je nach Wahl des Benutzers verändert. Gibt es Wünsche für miTT PWA for WP oder miTT PWA for Joomla, dann lassen Sie es mich bitte wissen.

Heutzutage unterstützen die bekanntesten Browser Programmen wie Firefox, Chrome und Safari die Medienabfrage prefers color scheme und machen sie zu einer Standardpraxis bei der Gestaltung zugänglicher und benutzerfreundlicher Websites.

Im Wettbewerb der Apps kann die Bereitstellung eines maßgeschneiderten Erlebnisses durch Dark- and Light Mode ein subtiler, aber wirkungsvoller Weg sein, um das Engagement zu erhöhen. Durch die Implementierung kann man sich von der Masse abzuheben, zumal die verschiedene Betriebssysteme, einschließlich iOS und Android ihren Nutzern ermöglichen, solche dunklen Farbschemata und Themen systemweit zu wählen.

Die Einbindung von Service Workern in PWAs verbessert das Nutzererlebnis weiter, indem sie Offline-Funktionen und schnellere Ladezeiten ermöglicht, was für die fortschreitende Verbesserung von Webanwendungen steht. Der Einsatz moderner Webtechnologien zur Anpassung von Inhalten an die Präferenzen der Nutzer ist nicht nur ein Trend, sondern wird immer mehr zur Norm für eine reaktionsschnelle und nutzerzentrierte Webpräsenz.

Implementierung von Theme-Modi Light Dark für ein verbessertes Benutzererlebnis in WordPress mit einem Plugin

Die Aktivierung von Theme-Modi auf Ihrer WordPress-Website, insbesondere von Dark Mode und Light Mode, verbessert den Benutzerkomfort und die Zugänglichkeit. Hier ist eine einfache Anleitung:

• Installieren Sie ein Plugin zum Umschalten des Modus: Wählen Sie ein Plugin wie Droit Dark Mode, um einen Light-Dark-Modus-Button einfach zu integrieren.
• Joomla Extension für Dark Mode: For a more straightforward implementation, consider using Joomla extensions such as EB Dark Mode that provide functionalities like automatic mode switching and customizable time settings.
• Aktivieren Sie das Plugin: Navigieren Sie zu Ihrem WordPress-Plugin-Verzeichnis, installieren und aktivieren Sie das gewählte Theme-Modus-Plugin.
• Erscheinungsbild anpassen: Legen Sie Ihr bevorzugtes Farbschema für helle und dunkle Themen in den Plugin-Einstellungen fest. Einige bieten ein Standard-Farbschema, während andere eine vollständige Anpassung ermöglichen
• Integriere ein Toggle Switch: Fügen Sie auf Ihrer Website eine Umschalttaste ein, mit der die Nutzer leicht zwischen den Modi wechseln können.
• Theme Kompatibilität gewährleisten: Überprüfen Sie, ob Ihr WordPress-Theme die Farbänderungen unterstützt, und passen Sie gegebenenfalls CSS an.
• Überlegungen zur Benutzerfreundlichkeit: Denken Sie daran, dass "dark" sich auf verschiedene Schattierungen und nicht nur auf Schwarz bezieht; wählen Sie Farben, die die Augen beim Lesen entlasten.
• Testen Sie die Funktionalität: Prüfen Sie, wie Ihr WordPress-Dashboard und Ihr Frontend in beiden Modi angezeigt werden, um Konsistenz und Benutzerfreundlichkeit zu gewährleisten..

Durch die sorgfältige Auswahl des richtigen Plugins und die Feinabstimmung der visuellen Elemente können Administratoren allen Website-Besuchern ein individuelleres und komfortableres Benutzung der Progressiven Web App bieten.

Implementieung Light und Dark Mode in WordPress Themes und Joomla Templates

Die Integration in ein WordPress Theme oder Joomla Template, die zwischen Dark und Light Modus wechseln kann, verbessert die Benutzerfreundlichkeit und die Accessibility. Folgt erfahren Sie, wie Sie das erreichen:

• Automatische Erkennung per CSS: Verwendung von Media-Queries zur Erkennung der Systempräferenz des Nutzers:

  @media (prefers-color-scheme: dark) {
    /* Dark mode styles */
  }
  
  @media (prefers-color-scheme: light) {             
    /* Light mode styles */
  }
  

• Automatische Erkennung per JavaScript: Um über JavaScript auf das "Schema" zuzugreifen, können Sie die Methode "matchMedia" verwenden:

  
  const darkTheme = window.matchMedia('(prefers-color-scheme: dark)')
   

• Toggle Button: Implementieren Sie einen Toggle Button, mit der die Benutzer manuell zwischen den Modi wechseln können. Speichern Sie die Wahl des Nutzers mit lokalem Speicher oder Cookies, um die Auswahl beizubehalten.
• Verbesserung der Bilder: Mit dem html element kann kann angepasste Bilder für den Light und Dark Mode verwenden:

  <picture>
    <source srcset="dark-picture.png" media="(prefers-color-scheme: dark)" />
    <source srcset="light-picture.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" />
    <img id="screenshot" src="light-picutre.png" />
  </picture>
  

  Um ein Bild mit JavaScript zu manipulieren, können Sie das src-Element des Bildes ändern. Im zweiten Beispiel sehen Sie, wie Sie den Dunkelmodus per JS ansprechen können.
• Bilder in Graustufen: Eine einfache Möglichkeit, Bilder zu konvertieren, ist die Anwendung eines Graustufenfilters über CSS. Verwenden Sie CSS-Filter sorgfältig, um die Auswirkungen auf den Browser zu minimieren.

  @media (prefers-color-scheme: dark) {
    :root {
    --image-dark-filter: grayscale(42%);
    }
   
  img.light-images {
    filter: var(--image-dark-filter);
   }
  }
  

• CSS Klassen: Manchmal eignet sich ein Abschnitt nicht für den dunklen Modus. Weisen Sie diesen Ausnahmen eine Klasse zu, die das Styling im dunklen Modus verhindert:

  .disable-dark-mode {
    /* Light mode styles */
   }
  

Stellen Sie sicher, dass die Darstellung in beiden Modi konsistent und intuitiv bleibt. Testen Sie die Vorlage regelmäßig, um zu überprüfen, ob alle Komponenten wie erwartet dargestellt werden.

So definieren Sie die CSS Farben in Ihrer Joomla PWA Template oder Ihrem WordPress PWA Theme

Oben haben wir gesehen, wie wir mit CSS zwischen den Farbthemen wechseln und den Code in WordPress Theme oder Joomla Template implementieren. Jetzt lernen wir, wie man mit CSS ein Farbschema für den Dark Mode erstellt.

HSL Farben sind perfekt geeignet, um den dunklen Modus über CSS Variablen zu erstellen

Die CSS-Funktion "calc()" ermöglicht es uns, Berechnungen mit Werten durchzuführen. Zum Beispiel können wir damit die Polsterung eines Elements auf das Ergebnis einer Berechnung setzen, wie "padding: calc(3rem + 5px)".

Ein weiterer Anwendungsfall für die Funktion "calc()" ist die Änderung der Helligkeit einer Farbe. Dies kann durch die Verwendung des Operators "+" oder "-" mit einer benutzerdefinierten CSS-Eigenschaft wie "--color-company-red-l" erreicht werden. Durch Erhöhen oder Verringern des Wertes dieser Eigenschaft können wir die Farbe heller bzw. dunkler erscheinen lassen.

Definieren Sie die HSL-Farbe als CSS-Variable wie folgt:

  --color-pwa-primary-h: 0;
  --color-pwa-primary-s: 100%;
  --color-pwa-primary-l: 50%;

Erstellen Sie die HSLFarbe:

--color-pwa-primary: hsl(var(--color-pwa-primary-h), var(--color-pwa-primary-s), var(--color-pwa--primary-l));

Anpassen der Farbhelligkeit mit der Funktion calc() zum Abdunkeln und Aufhellen

Die --color-pwa-primary ist definiert. Wir können diese Farbe als Standardfarbe und für den hellen Modus verwenden. Im folgenden Beispiel wird diese Farbe die Dunkelheit der HSL-Farbe reduzieren, um zu zeigen, was möglich ist, um auf einfache Weise die beste positive Kontrastpolarität für den hellen Modus und den dunklen Modus zu erreichen. Diese Technik ermöglicht die Feinabstimmung der minimalen Farbkontrastverhältnisse für die beste Lesbarkeit.

 /* light mode*/
  --color-color-pwa-primary-light: hsl(
    var(--color-pwa-primary-h),
    var(--color-pwa-primary-s),
    calc(var(--color-pwa-primary-l) + 15%)
  );
  /* dark mode*/
  --color-color-pwa-primary: hsl(
    var(--color-pwa-primary-h),
    var(--color-pwa-primary-s),
    calc(var(--color-pwa-primary-l) - 25%)
  );

Mit der CSS-Funktion calc() können wir Berechnungen mit Beispielwerten durchführen (z.B.: width: calc( 3 + 100px));).

Mit der calc-Funktion mit + oder - Operator über die benutzerdefinierte CSS-Eigenschaft --color-pwa-primary-l, können wir die Helligkeit reduzieren oder erhöhen. Dies macht es sehr einfach, eine dunkle Farbe Thema, um den Light Mode Version zu erstellen.

Bei der Gestaltung von Text für eine gute Lesbarkeit auf dunklen Displays und mobilen Bildschirmen ist es wichtig, sich auf Kontrast und visuellen Komfort zu konzentrieren.

Verwandeln Sie Ihre Website mit miTT PWA in eine Progressive Web App

Für Besitzer von WordPress PWA oder Joomla PWA Websites, die die Nutzerbindung verbessern möchten, ist die Umwandlung ihrer Website in eine Progressive Web App (PWA) ein entscheidender Schritt nach vorn. Das miTT PWA-Plugin dient als Brücke, die diesen Übergang erleichtert und es Ihrer Website ermöglicht, die Vorteile von PWA sowohl auf mobilen als auch auf Desktop-Plattformen unabhängig vom Betriebssystem zu nutzen.

Im Folgenden finden Sie die wichtigsten Aspekte der Umwandlung einer Website in eine PWA mit miTT PWA:

• Einfache Installation: Das Plugin wurde entwickelt, um den Prozess zu optimieren, die Komplexität zu verringern und eine einfache Einrichtung zu ermöglichen.
• Plattformübergreifende Kompatibilität: Ein wesentlicher Vorteil des miTT PWA Plugins ist die Möglichkeit, die Website als App auf verschiedenen Geräten, einschließlich Android, iOS und Desktops, installieren zu können. Eine PWA ist betriebssystemunabhängig.

Vorteile, die Sie mit einer PWA-Konvertierung erwarten können:

• Offline-Funktionalität: PWAs können offline oder in Internetzverbindung mit schlechter Qualität funktionieren und gewährleisten einen ständigen Zugang zu Ihren Inhalten.
• Verbesserte Leistung: Webanwendungen können schneller geladen werden, was das Gesamterlebnis für den Endbenutzer verbessert.
• Verbesserte Leistung: Mit Optionen wie Push Nachrichten können Sie Nachrichten Kanäle wie News zu Ihrem Benutzern senden.

Für Joomla-Websites verwandelt insbesondere das miTT PWA Plugin die Website in eine PWA, die eine größere Reichweite und ein App ähnliches Erlebnis ermöglicht. Durch die Anwendung von miTT PWA Extension kann Ihre Joomla-Website Funktionen wie iOS Installationsbanner nutzen, die Sichtbarkeit erhöhen und die Nutzerbindung verbessern.

Darüber hinaus können über das WordPress Theme oder Joomla Template, die sich sowohl an den Light Mode als auch an den Dark Mode anpassen, ein komfortables Seherlebnis bieten, das sich an die Vorlieben und Systemeinstellungen der Nutzer anpasst und sie länger auf Ihrer Website hält.

Zusammenfassend lässt sich sagen, dass miTT PWA eine robuste Softwarelösung für die Integration von Progressive-Web-Funktionen in Ihre WordPress Webseite oder Joomla Website ist, die letztlich die Zufriedenheit und Bindung der Nutzer erhöht.

PWA App mit Light Mode Dark Mode

Die Integration von Light und Dark Mode in Progressive Web Apps (PWAs) bietet erhebliche Vorteile für die Benutzererfahrung.

Die wichtigsten Punkte sind:

• Benutzervorlieben: Anwendungen, die Light- und Dark Themes nutzen, tragen den unterschiedlichen Bedürfnissen und Vorlieben der Nutzer entgegen und zeigen, dass sie die individuellen Bedürfnisse der Nutzer respektieren.
• Batterie Power: Der dunkle Modus wird oft mit einem geringeren Energieverbrauch bei Geräten mit OLED- oder AMOLED-Bildschirmen in Verbindung gebracht, was die Akkulaufzeit verlängern kann.
• Visueller Komfort: Dunkle Themen können die Belastung der Augen bei schlechten Lichtverhältnissen verringern, während helle Themen bei hellen Lichtverhältnissen die Lesbarkeit verbessern.
• Einheitliche Gestaltung: Um ein einheitliches Design in beiden Modi zu gewährleisten, ist ein sorgfältiger Ansatz erforderlich, der sicherstellt, dass die Elemente deutlich sichtbar sind und die Schnittstellen unabhängig vom gewählten Thema benutzerfreundlich bleiben.

In der Praxis kann der Wechsel zwischen dem hellen und dem dunklen Modus über die Bedienelemente der Benutzeroberfläche erfolgen. Diese Umschaltung dient nicht nur der Personalisierung des Benutzererlebnisses, sondern trägt auch den verschiedenen Kontexten Rechnung, in denen eine App genutzt werden kann. Power-User, die viel Zeit auf dem Bildschirm verbringen, wählen oft den dunklen Modus, weil er die Belastung der Augen durch blaues Licht verringert und den Akku des Geräts schont. Nutzer, die unterwegs sind, verwenden oft den dunklen Modus, um den Akku zu schonen.

Außerdem ist die Anpassung von Themenfarben in PWAs nicht nur eine ästhetische Überlegung. Sie trägt zur visuellen Leistung des gesamten App-Designs und der Funktionalität bei und unterstreicht die Bedeutung der Farbwahl des Templates.

Es sollte beachtet werden, dass die Variabilität der Themes zwar sehr vorteilhaft ist, aber auch eine zusätzliche Komplexitätsebene im Entwicklungsprozess der App darstellt. Die Entwickler müssen die Zugänglichkeit und ästhetische Integrität beider Themes sicherstellen und gleichzeitig die potenziellen Auswirkungen auf das Engagement und die Zufriedenheit der Nutzer mit dem dunklen Theme berücksichtigen.

Dark Mode oder Light Mode: Was ist besser für die Augen?

In den letzten Jahren gab es eine wachsende Debatte zwischen denjenigen, die Dark und Light Mode bevorzugen. Die Größe der menschlichen Pupille ändert sich je nach der Menge des Umgebungslichts und des direkten Sonnenlichts in der Umgebung. Die Nutzer achten zunehmend auf die ästhetischen und funktionalen Auswirkungen ihrer Bildschirmeinstellungen. Der dunkle Modus, der sich durch hellen Text auf dunklem Hintergrund auszeichnet, bietet Vorteile wie geringere Augenbelastung und Energieverbrauch, insbesondere bei OLED- und AMOLED-Displays. Der helle Modus hingegen zeigt dunklen Text auf hellem Hintergrund und ist traditionell das Standardschema für die meisten Betriebssysteme und Anwendungen.

Studien deuten darauf hin, dass der dunkle Modus bei schlechten Lichtverhältnissen die Augen schont und möglicherweise die Störung des zirkadianen Rhythmus des Nutzers verringert. Dies ist ein Vorteil für Menschen, die viel Zeit mit ihren Geräten verbringen, insbesondere vor dem Schlafengehen. Der Lichtmodus, der mehr blaues Licht aussendet, wird häufig verwendet und kann sich negativ auf den Tiefschlaf und die Gesundheit der Augen auswirken. Umgekehrt wird der helle Modus oft in hellen Umgebungen bevorzugt, um die Lesbarkeit zu verbessern und die Blendung des Bildschirms zu minimieren. Die Verwendung des dunklen Modus kann die Belastung der Augen bei schwachem Licht verringern und den Akku schonen.

Die Präferenz zwischen Dunkel- und Hellmodus kann auch von den individuellen Bedürfnissen und dem Kontext abhängen, in dem das Gerät verwendet wird. Faktoren wie Sehbehinderung, persönlicher Komfort und die Art der Inhalte, die betrachtet werden, spielen eine wichtige Rolle bei der Entscheidung, welcher Modus für einen bestimmten Benutzer besser ist. Da die Entwickler weiterhin beide Optionen anbieten, um den Vorlieben der Benutzer gerecht zu werden, verlagert sich die Diskussion von einer Überlegenheit zu einer Personalisierung und Auswahl.

Betriebssysteme unterstützen dieses Feature

Als man noch sich in Geduld üben musste, um iOS 13 installieren zu können, um die Darstellung auch in hell und dunkel (also Unterstützung von Dark Mode) anzeigen lassen zu können. Mittlerweile bieten alle Browser und Betriebssysteme von Linux über Windows zu MacOS den Hell und Dunkelmodus an, wobei der Light Mode der Standard ist. Infolgedessen wird dieser Support auch für Programme angeboten, da dies auch von den Benutzern erwartet wird.

Fazit des Vergleichs von Light Mode vs Dark Mode

Die Implementierung des hellen und dunklen Modus in WordPress-Themes oder Joomla-Templates ist im Vergleich zur Entwicklung einer Progressive Web App (PWA) sehr einfach. Diese Funktion verleiht Ihrer App ein individuelles Erlebnis.

Light oder Dark Mode?

Bei meinen persönlichen Benutzeroberflächen bevorzuge ich den dunklen Modus, um das blaue Licht für einen besseren Schlaf zu reduzieren, und dunkel ist für mich beruhigender. Jeder Besucher der Website oder PWA sollte in der Lage sein, dies zu entscheiden. Die offene Frage, den dunklen Modus in die PWA-Manifest-Datei aufzunehmen, ist ärgerlich, aber es gibt Möglichkeiten dieses Problem zu lösen. Unterwegs hat der dunkle Modus den Vorteil, dass die Akkulaufzeit länger ist. Der Komfort des Nutzers sollte an erster Stelle stehen, nicht der Ersteller der App, PWA oder Website. In manchen Fällen kann heller Text auf dunklem Hintergrund unscharf erscheinen.

Ich bin ein Webentwickler aus Stuttgart mit langjähriger Erfahrung. Ich kann Sie kompetent beraten, wie Sie neue Webtechnologien effektiv nutzen können. Meine Erweiterungen für miTT PWA for Joomla und miTT PWA for WP sind mit den neuesten Webtechnologien entwickelt.

Progressive Web App unverzichtbar für jede Webseite? Lesen Sie mehr...

15 Tipps zur Verbesserung einer PWA (Progressive Web App) Lesen Sie mehr...

WebP Bilder - neuer Speed für die Webseite Lesen Sie mehr...