Der Dark Mode ist eine Einstellung des Betriebssystems, die sämtliche Fenster, Menüs und Bedienelemente in dunkle Farben taucht und Schrift wie Inhalte in hellen Tönen davor setzt. Gedacht ist er für Umgebungen mit wenig Licht, in denen eine dunkle Oberfläche angenehmer für die Augen ist als eine helle. Smartphones, Tablets und Rechner bieten ihn in ihren Anzeigeeinstellungen an, das iPhone auf Wunsch sogar mit einem Zeitplan, der am Abend selbsttätig von hell auf dunkel umstellt.
Ihre Website folgt dieser Vorgabe allerdings nur, wenn ihr Stylesheet neben den hellen auch dunkle Farben bereithält, die der Browser bei entsprechender Geräteeinstellung übernimmt. Fehlen sie, bleibt die Seite hell inmitten einer ansonsten abgedunkelten Umgebung. Eine sorgfältig abgestimmte dunkle Variante zählt deshalb zur Usability Ihres Auftritts, denn Besucher finden dort genau die Ansicht vor, für die sie sich auf ihrem Gerät entschieden haben.
Dark Mode und dunkles Design im Unterschied
Der Begriff Dark Mode bezeichnet eine umschaltbare Darstellung, bei der eine Website oder App zwei Farbschemata bereithält und sich nach der Geräteeinstellung oder einem eigenen Schalter richtet. Ein dunkles Design ist dagegen dauerhaft angelegt und zeigt jedem Besucher dieselbe dunkle Oberfläche, gleich wie sein Gerät eingestellt ist. Diese feste Variante empfiehlt sich nur in Ausnahmefällen wie Angeboten rund um Fotos und Filme, bei denen die Oberfläche zurücktreten und den Blick ganz auf die Medien lenken soll.
Als systemweite Einstellung hat Apple den Dark Mode im Juni 2018 mit macOS Mojave eingeführt, und Android bietet das dunkle Design seit der Version 10 seines Betriebssystems an. Windows stellt die Wahl zwischen hellem und dunklem Modus in seinen Farbeinstellungen bereit, sodass die dunkle Darstellung heute auf den verbreiteten Rechnern und Smartphones zur Verfügung steht. Websites lesen die gewählte Einstellung über eine Abfrage im Stylesheet aus und passen ihre Farben daraufhin an.
Vorteile des Dark Mode
Bei gedämpftem Licht ist eine dunkle Oberfläche angenehmer für die Augen, weshalb sich der Dark Mode vor allem für die Nutzung am Abend oder in abgedunkelten Räumen eignet. Darüber hinaus verbessert er die Sichtbarkeit für Menschen mit eingeschränktem Sehvermögen und für Nutzer, die empfindlich auf helles Licht reagieren. Bietet Ihre Website eine dunkle Variante, lesen Ihre Besucher sie am Abend in derselben ruhigen Darstellung wie ihre übrigen Apps.
Auf Geräten mit OLED-Bildschirm senkt die dunkle Darstellung zudem den Stromverbrauch. Der Grund liegt in der Bauweise dieser Bildschirme, deren Bildpunkte selbst leuchten und sich einzeln abschalten lassen, sodass schwarze Bildpunkte gar kein Licht erzeugen müssen. Ein LCD-Bildschirm wird dagegen von einer Hintergrundbeleuchtung erhellt, die hinter allen Bildpunkten zugleich leuchtet.
Gestalterisch lässt eine dunkle Umgebung Fotos, Videos und farbige Akzente deutlicher hervortreten, während Menüs und Bedienelemente in den Hintergrund rücken. Auf den bildreichen Websites von Fotografen, Architekturbüros oder Galerien gewinnen die gezeigten Arbeiten dadurch an Präsenz. Am besten prüfen Sie an Ihren eigenen Aufnahmen, ob sie vor dunklem Grund tatsächlich stärker wirken als vor hellem.
Nachteile und Grenzen dunkler Darstellungen
Die Einsparung beim Strom bleibt an die Bildschirmtechnik gebunden und betrifft OLED-Geräte, während Bildschirme mit Hintergrundbeleuchtung nicht in gleichem Maß davon profitieren. In hellen Umgebungen kehrt sich der Vorteil zudem um, denn für gut beleuchtete Räume gilt der helle Modus als die geeignete Wahl. Eine dauerhaft dunkel gestaltete Website nimmt Besuchern im Büro oder bei Tageslicht diese Wahl, während ein umschaltbarer Dark Mode beiden Situationen gerecht wird.
Zusätzlicher Aufwand entsteht in der Gestaltung, weil jede Farbe, jedes Logo und jede Grafik vor beiden Hintergründen bestehen muss. Bilder mit weißem Hintergrund heben sich in einer dunklen Umgebung als helle Flächen ab und werden daher am besten leicht abgedunkelt. Logos mit dunkler Schrift auf transparentem Grund verlieren vor dunklen Flächen ihre Konturen und brauchen eine helle Variante, die sich ebenso für das Favicon in einer dunklen Tab-Leiste eignet.
Helle oder dunkle Darstellung für Ihre Website
Bewährt hat sich, die helle Gestaltung als Grundlage zu behandeln und den Dark Mode als zweite Variante hinzuzufügen, die sich nach der Einstellung des Geräts richtet. Diese Vorgabe hat Vorrang, weil Besucher ihre Wahl bereits für das gesamte Gerät getroffen haben und eine Website, die sie übergeht, leicht fehlerhaft erscheint. Ein zusätzlicher Umschalter auf der Seite bleibt eine Ergänzung für Besucher, die einen einzelnen Auftritt anders betrachten möchten als ihr übriges Gerät.
Ein dauerhaft dunkles Design ist dann die passende Wahl, wenn Bilder und Filme im Mittelpunkt des Angebots stehen und die Oberfläche bewusst hinter den Inhalten zurücktreten soll. Für Ihre Marke lohnt vorab ein Blick auf Logo und Hausfarbe, deren Wirkung sich verändert, sobald sie nicht mehr auf Weiß, sondern auf dunklem Grund stehen. Am besten legen Sie beide Varianten mit echten Inhalten nebeneinander und prüfen in Ruhe, ob Ihr Auftritt auch in der dunklen Ausführung auf den ersten Blick wiedererkennbar bleibt.
Speichert ein Umschalter die Wahl Ihrer Besucher auf deren Gerät, greift § 25 des Telekommunikation-Digitale-Dienste-Datenschutz-Gesetzes, der für solche Speicherungen grundsätzlich eine Einwilligung verlangt. Ausgenommen sind Speicherungen, die für einen ausdrücklich gewünschten Dienst unbedingt erforderlich sind. Ob Ihr Umschalter darunter fällt, klären Sie am besten mit Ihrer Datenschutzberatung, während eine allein der Geräteeinstellung folgende Website dafür nichts speichern muss.
Tipps für die Gestaltung der dunklen Variante
Als Hintergrund eignet sich ein tiefes Grau besser als reines Schwarz, weil Schatten auf einem solchen Grund sichtbar bleiben und helle Schrift die Augen weniger anstrengt. Über der Seite liegende Aufklappmenüs, Karten und Hinweisfenster erhalten einen etwas helleren Grauton als der Grund darunter. Aus diesen Abstufungen entsteht eine Tiefenwirkung, die in der hellen Gestaltung die Schatten übernehmen.
Ihre Hausfarben übernehmen Sie am besten nicht unverändert, weil ein auf Weiß kräftig wirkender Ton vor dunklem Grund spürbar an Leuchtkraft und an Kontrast verlieren kann. Bewährt hat sich eine aufgehellte Variante jeder Akzentfarbe, die den Charakter der Marke bewahrt und dennoch gut lesbar bleibt. Wie Grundton, Akzent und neutrale Töne zusammenspielen, vertieft unser Beitrag zur Farbe im Webdesign.
Für die Typografie gelten in beiden Varianten dieselben Mindestkontraste, die nach den Web Content Accessibility Guidelines für normalen Text bei einem Verhältnis von 4,5 zu 1 liegen. Für Onlineshops und Buchungsangebote unter dem Barrierefreiheitsstärkungsgesetz ist dieser Wert über eine europäische Norm maßgeblich, deren Einordnung unser Beitrag zum barrierefreien Webdesign erläutert. Da Besucher mit dunkler Geräteeinstellung die dunkle Variante ohne eigenes Zutun sehen, sollte sie dieselben Werte erreichen wie die helle.
Fotos mit weißem Hintergrund dunkeln Sie für die dunkle Ansicht leicht ab, und Logos wie Symbole legen Sie in einer hellen Fassung oder als Vektorgrafik an, die ihre Farbe aus der umgebenden Schrift übernimmt. Prüfen lässt sich das Zusammenspiel in den Entwicklertools des Browsers, die eine dunkle Geräteeinstellung nachstellen und den Kontrast jeder Schriftfarbe anzeigen. So sehen Sie beide Varianten im direkten Vergleich, ohne das Betriebssystem umstellen zu müssen.
Unser Tipp
Legen Sie Ihre Farben von Beginn an als Paare an, sodass im Styleguide neben jedem hellen Ton gleich sein dunkles Gegenstück steht. Kommt später eine neue Seite oder eine Aktion mit eigener Farbe hinzu, ist die dunkle Entsprechung damit von vornherein mitbedacht. Ihr Team hat Hintergrund, Flächen, Schrift und Akzent so für beide Varianten auf einen Blick vor Augen, ganz ähnlich wie in der Farbpalette oben.
Early Webdesign: Farben, Schriften und Website-Design
Das Team von Early Webdesign, unserer Schwestermarke, legt Farbpalette und Schriften für Ihren Auftritt fest. Anschließend gestaltet und programmiert es Ihre Website individuell mit WordPress oder Astro.
Fazit
Der Dark Mode ist eine dunkle Darstellung, die Besucher auf ihrem Gerät wählen und die eine Website als zweite Variante neben der gewohnten hellen Gestaltung übernimmt. Bei gedämpftem Licht ist er angenehmer für die Augen, kommt lichtempfindlichen Menschen entgegen und spart auf OLED-Bildschirmen Strom, während in hellen Räumen die helle Ansicht ihre Stärken ausspielt. Ein dauerhaft dunkles Design bleibt Angeboten vorbehalten, bei denen Bilder und Filme im Mittelpunkt stehen.
Gestalterisch trägt die dunkle Variante ein tiefes Grau statt Schwarz, hellere Töne für hervorgehobene Flächen und aufgehellte Hausfarben. Schrift erreicht in beiden Ansichten dieselben Mindestkontraste, Fotos mit weißem Hintergrund werden leicht abgedunkelt, und Logos erhalten eine helle Entsprechung. Ein eigener Umschalter ergänzt die Geräteeinstellung, wobei für das Speichern seiner Wahl das Datenschutzrecht gilt.
Stand: 2. Oktober 2026. Grundlage sind die Gestaltungsrichtlinien von Apple und Google, die Hilfeseiten von Microsoft und Samsung, die Web Content Accessibility Guidelines des W3C, die Hinweise der Bundesfachstelle Barrierefreiheit und § 25 TDDDG. Dieser Beitrag ersetzt keine Rechtsberatung.
