Dunkelmodus für deine Website oder App einbauen (ohne weißes Aufblitzen)

Um einen Dunkelmodus einzubauen, definierst du deine Farben als benannte Tokens (Hintergrund, Text, Fläche, Rahmen, Akzent) statt fest codierter Werte. Jedes Token bekommt einen hellen und einen dunklen Wert, und du wechselst mit dem CSS-Medienmerkmal prefers-color-scheme zwischen ihnen, sodass die Seite der Systemeinstellung des Besuchers folgt. Wenn du zusätzlich einen manuellen Umschalter willst, speicherst du die Wahl im Browser und wendest sie mit einem kleinen Inline-Script im Head der Seite an, damit es beim Laden kein weißes Aufblitzen gibt. Prüfe danach Kontraste, Bilder und Diagramme in beiden Designs. In einem KI-App-Builder erledigt ein klarer Prompt den größten Teil; die Qualität entsteht beim Prüfen.

Zwei Ansätze

Die meisten Apps fahren mit dem zweiten Ansatz am besten: Standardmäßig das System respektieren, aber Menschen erlauben, es zu überschreiben.

Mit Farb-Tokens anfangen

Ein Dunkelmodus ist mühsam, wenn Farben verstreut als white, #333 und gray-100 im Code stehen. Er ist einfach, wenn jede Farbe aus einer kleinen Menge benannter Tokens kommt:

Jede Komponente nutzt die Token-Namen. Ein Themenwechsel bedeutet dann, einen Satz Werte auszutauschen, statt jede Komponente anzufassen.

Tipps für die dunkle Palette:

• Vermeide reines Schwarz und reines Weiß für große Flächen; sehr dunkles Grau und Off-White sind leichter zu lesen.
• Zeige Tiefe mit helleren Flächen, nicht mit Schatten, denn Schatten sind auf dunklem Grund kaum zu sehen.
• Entsättige leuchtende Markenfarben etwas; auf dunklem Grund können sie unangenehm glühen.
• Halte den Kontrast lesbar. Die Stufe AA von WCAG verlangt für normalen Text mindestens 4,5:1. Gedämpfter grauer Text scheitert im Dunkelmodus oft daran.

Mit Tailwind CSS

Tailwind ist in vielen mit KI gebauten Apps das Standard-Werkzeug für Styles. Laut Tailwinds Dokumentation zum Dunkelmodus nutzt die Variante dark: standardmäßig prefers-color-scheme, sodass Klassen wie bg-white dark:bg-gray-900 ohne weiteren Aufwand der Systemeinstellung folgen.

Für einen manuellen Umschalter in Tailwind v4 zeigt die Dokumentation, wie die Variante auf eine Klasse an einem übergeordneten Element umgestellt wird:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

Dann fügt die App die Klasse dark am Root-Element hinzu oder entfernt sie. Die Dokumentation empfiehlt außerdem ein Inline-Script im Head, das die gespeicherte Wahl (oder die Systemeinstellung) anwendet, bevor die Seite gezeichnet wird. Genau so vermeidest du das Aufblitzen.

Weißes Aufblitzen vermeiden

Das Aufblitzen entsteht, weil die Seite zuerst im hellen Modus gezeichnet wird, dann JavaScript lädt, die gespeicherte Wahl liest und auf dunkel wechselt. Die Lösung:

1. Ein winziges Inline-Script im Head der Seite liest das gespeicherte Design und setzt die Klasse am Root-Element, bevor etwas gerendert wird.
2. Setze für jedes Design die CSS-Eigenschaft color-scheme, damit die vom Browser gezeichneten Teile (Scrollbalken, Formularelemente) passen.
3. Gib der Seite in beiden Designs eine feste Hintergrundfarbe.
4. Ist die App serverseitig gerendert, stelle sicher, dass Server und Browser dasselbe Startdesign verwenden, sonst kann die Seite neu rendern und flackern.

Beispiel-Prompts

Eine vollständige Einrichtung:

Füge einen Dunkelmodus hinzu. Ersetze zuerst die fest codierten Farben durch Design-Tokens (Hintergrund, Fläche, Text, gedämpfter Text, Rahmen, Akzent) mit hellen und dunklen Werten. Standardmäßig die Systemeinstellung des Besuchers verwenden. Füge im Header einen Designschalter mit den Optionen Hell, Dunkel und System hinzu, merke die Wahl im localStorage und wende sie per Inline-Script im Head an, damit es beim Laden kein weißes Aufblitzen gibt. Setze color-scheme für jedes Design. Das aktuelle helle Design bleibt genau so, wie es ist.

Das Übrige beheben:

Prüfe jede Seite im Dunkelmodus und behebe: Text mit niedrigem Kontrast (mindestens 4,5:1 anstreben), fest codierte weiße Hintergründe, Rahmen, die verschwinden, Diagramme mit dunklem Text auf dunklem Grund und Logos, die unsichtbar werden. Ändere das helle Design nicht.

Bilder und Diagramme:

Verwende im Dunkelmodus eine helle Version des Logos. Lass Diagrammachsen, Gitterlinien und Beschriftungen Design-Tokens nutzen. Gib Screenshots im Dunkelmodus einen dezenten Rahmen, damit sie nicht mit dem Hintergrund verschmelzen.

Schritt für Schritt

1. Farben prüfen. Finde fest codierte Farben und ersetze sie durch Tokens. Das ist der größte Teil der Arbeit.
2. Dunkle Werte definieren für jedes Token.
3. Dem System folgen mit prefers-color-scheme (oder Tailwinds Standard dark:).
4. Einen Umschalter hinzufügen, falls gewünscht: Hell, Dunkel, System. Speichere die Wahl im Browser; bei Apps mit Anmeldung kannst du sie auch im Profil des Nutzers ablegen.
5. Das Aufblitzen verhindern mit dem Inline-Script im Head und color-scheme.
6. Die schwierigen Stellen prüfen: Logos, Icons, Bilder mit weißem Hintergrund, Diagramme, Codeblöcke, Karten, Einbettungen, E-Mails.
7. Beide Designs testen auf Desktop und Handy, mit System auf hell und auf dunkel, und nach einem harten Neuladen.

Häufige Fehler

• Alles invertieren. Ein Filter, der Farben umkehrt, zerstört Fotos und Markenfarben.
• Fest codierte Farben übersehen. Eine einzelne weiße Karte auf einer dunklen Seite fällt sofort auf.
• Grauer Text mit niedrigem Kontrast. Sieht stilvoll aus, ist aber schlecht lesbar.
• Weißes Aufblitzen beim Laden. Besonders auf dem Handy bei Nacht gut sichtbar.
• Drittanbieter-Einbettungen vergessen. Karten, Videos und Widgets können hell bleiben; prüfe, ob sie eine dunkle Option haben.
• Umschalter mit nur zwei Zuständen. Hat jemand einmal geklickt, kann er nicht mehr zurück zur Systemeinstellung.
• Das helle Design kaputt machen. Schreibe im Prompt ausdrücklich, dass das helle Design gleich bleiben soll.

Checkliste

• Alle Farben kommen aus Design-Tokens
• Standardmäßig folgt die Seite der Systemeinstellung
• Optionaler Umschalter mit Hell, Dunkel und System, gemerkt
• Kein weißes Aufblitzen beim Laden oder Neuladen
• color-scheme gesetzt, damit Formularelemente und Scrollbalken passen
• Textkontrast in beiden Designs mindestens 4,5:1
• Logos, Bilder, Diagramme und Einbettungen im Dunkelmodus geprüft
• Helles Design unverändert
• Auf Desktop und Handy getestet

Dunkelmodus mit Mythex

Apps, die auf Mythex entstehen, nutzen standardmäßig Vite, React, TypeScript und Tailwind. Der Tailwind-Ansatz oben gilt also direkt: Füge den vollständigen Einrichtungs-Prompt in den Chat ein, prüfe dann die Vorschau in beiden Designs und in der Handy-Größe. Die Empfehlung von Mythex für Design-Prompts lautet, zu benennen, was geändert und was beibehalten werden soll. Das ist hier wichtig: Sag, dass das helle Design bleiben muss, wie es ist. Siehe Design- und UI-Prompts, und setze mit einem Checkpoint zurück, wenn ein Durchgang schiefgeht.

Mehr dazu, wie das Aussehen stimmt, findest du unter wie du mit KI eine gut aussehende App gestaltest und wie du Prompts für KI-App-Builder schreibst.

Fragen