Design
Im Dunkeln beginnen
Dark-first zu gestalten zwang uns, bei Kontrast, Tiefe und Farbe bewusst zu sein, und machte auch den Light-Mode besser.
Wenn man im Dark-Mode beginnt, kann man sich nicht auf schwere Schatten und Rahmen stützen, um Hierarchie zu schaffen; man muss sie mit Abstand, Kontrast und Zurückhaltung verdienen. Diese Entscheidungen trugen direkt in einen saubereren Light-Mode.
Das ganze System läuft auf einer kleinen Menge von CSS-Custom-Properties, Farben, Rahmen, Radien, sodass eine einzige Änderung überall durchschlägt und beide Themes ohne doppelte Arbeit synchron bleiben.
Warum es in beiden Themes trägt
Dunkel als Basis
Kontrast und Tiefe dort entschieden, wo es am schwersten ist.
Semantische Tokens
Farben nach Rolle benannt, ein Theme-Wechsel ist eine Ebene tief.
Hell als Gleichwertiges
Ein nahtloses zweites Theme, kein Nachgedanke.
Der Ansatz
Dark-first zu gestalten verändert das Ergebnis
Ein nachträglicher Dark Mode ist fast immer erkennbar.
Die meisten Produkte gestalten in Hell und verdunkeln danach, weshalb so viele Dark Modes wie eine trübe Kopie wirken. Im Dunkeln zu beginnen erzwingt die schwierigen Kontrast- und Tiefenentscheidungen vorab, wo sie hingehören.
Mit wenigen semantischen Tokens wird Hell dann zu einem sauberen zweiten Theme statt zu einem Kampf, dieselbe Struktur, neu eingefärbt, beide wirken beabsichtigt.
Das System
Was es konsistent hält
Tokens, keine Einzelfälle
Eine kleine Menge Variablen treibt Farbe und Fläche, sodass nichts abdriftet.
Zwei Themes, eine Quelle
Der Light-Mode wird aus denselben Tokens abgeleitet, nicht separat gepflegt.
Hierarchie durch Struktur
Abstand und Kontrast leisten die Arbeit, nicht schwere Rahmen und Schatten.
Aus der Praxis
Dark-First verändert die Fragen, die man stellt
Auf dunkler Fläche zu beginnen erzwingt Ehrlichkeit bei der Hierarchie. Ohne schwere Schlagschatten muss Erhebung aus Tonwert und Kontrast entstehen, und jede Fläche muss sich ihre Helligkeit verdienen. So entworfene Oberflächen überstehen den Rückweg in den Light Mode meist mit klarerer Struktur.
Reines Schwarz und reines Weiß sind beide Fallen: Auf schwarzem Grund flimmert Text durch Halation, und weißer Text in voller Stärke leuchtet unangenehm. Wir schieben beides ein paar Stufen Richtung Grau und lassen Akzentfarben die Energie tragen.
Getestet wird mit echten Inhalten: nachts, auf OLED-Handys, bei minimaler Helligkeit, also unter den Bedingungen, in denen Dark Mode wirklich genutzt wird. Was im Portfolio-Screenshot stimmungsvoll wirkt, kann im Zug unlesbar sein; der Nachttest deckt das auf.
Beschränkungen sind ein Gestaltungswerkzeug. Im Dunkeln zu beginnen nahm Optionen weg, und das Ergebnis war dadurch klarer.
Wir bauen Software für Teams, deren Werkzeuge zur tatsächlichen Arbeitsweise passen sollen — Web, Mobile, KI und die Systeme, die alles verbinden. Hier schreiben wir über das, was wir dabei lernen.