mittl medien | Webentwicklung in Stuttgart

Psychologie der Farben -
Überzeugung des Webseiten-Besuchers mit Light- oder Dark Mode

Dark Mode, auch für Webseiten ist eine Umsetzung möglich

Der Benutzer eines Computers gibt bereits dem Betriebssystem mit, wie bevorzugt seine Inhalte dargestellt werden. Momentan können Windows, Linux und OSX Nutzer entscheiden, ob die Darstellung in hell und dunkel geschehen soll. Mit i0S 13 erhält Apples Mobile Welt dieses Feature. Android unterstützt es noch nicht, jedoch kann man stark davon ausgehen, dass der Dark Mode auch implementiert wird. Je nach Betriebssystem kann also tagesabhängig oder fest gewählt werden, ob die Inhalte dunkel oder hell ausgegeben werden. Da sich die User sich besser mit Gerät identifizieren können, wird sich dieser Trend bestätigen.

Jeder Besucher eine Webseite hat eine gewisse Erwartungshaltung und honoriert dies nach seinen Vorzügen, verweilt entweder länger auf der Webseite oder ist eher von dem Angebot der Webseite überzeugt.

Mit der CSS Property "prefers-color-scheme" kann man den Light oder Dark Mode für neuere Browser realisieren, um besser auf den Nutzer der Webseite einzugehen. Dieser Mode wird von den gängigen aktuellen Browsern wie Firefox, Chrome, Safari bereits unterstützt


: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)
}

Um die Farben über CSS anzupassen, nutzt man CSS Variablen. Dann ist es sehr einfach global diese Farben für den Light und Dark Mode zu definieren und je nach Benutzereinstellung dies auch auszugeben. Bei Verwendung der CSS Calc Property könnte die Sättigung und Helligkeit angepasst werden.

Um mit Javascript greift mit "matchMedia" auf das "Scheme" zu:

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

Die auf den ersten Blick nicht sichtbaren Dinge wie Light- oder Dark Mode können die kleine Nuance von Vorteil zur Steigerung der Conversion Rate mit sich bringen, zudem auch eine Abhebung zum Mitbewerber sein. Ansprechende Webseiten haben deutlich mehr Erfolg.


Als erfahrener Webentwickler aus dem Raum Stuttgart kann ich Sie über einen sinnvollen Einsatz neuer Webtechnologien beraten.