Die CI · Kapitel 12

Dunkelmodus

Fast jede App und viele Webseiten haben heute einen dunklen Modus, und fast kein Styleguide sagt, wie die CI darin aussieht. In nexbrand ist der Dunkelmodus ein Teil der Fassung, geprüft und im Code wie alles andere.

Keine zweite Palette

Der Dunkelmodus legt sechs Teile einer Oberfläche je auf eine Farbe der Palette:

Jede Farbe, die hier steht, gehört zur Palette. Benennst du sie um, zieht der Dunkelmodus mit.

Einen Dunkelmodus anlegen

Im Editor, Reiter Farben, steht unter den Farben der Abschnitt Dunkelmodus. Dunkelmodus vorschlagen nimmt Farben der Palette. Fehlt ein dunkler Grund oder eine Hauptfarbe, die darauf reicht, legt der Vorschlag sie dazu an: Nachtgrund, Nachtfläche und eine hellere Fassung der Hauptfarbe, die deren Namen mit dem Zusatz „hell“ trägt. Danach wählst du jeden Teil aus einer Liste. Dunkelmodus entfernen nimmt ihn wieder heraus.

Morgenrot Bakery

Geprüft wie der Rest

Text, leiser Text, Text auf Flächen, Links in der Hauptfarbe und Text auf Knöpfen brauchen je 4,5:1 zu dem, worauf sie stehen; unter 3:1 meldet die Prüfung es als ernst. Zeigt ein Teil auf eine Farbe, die es nicht mehr gibt, steht auch das in der Prüfung.

Wo du ihn siehst

• Im Reiter Farben steht unter den Farbkarten die Karte Dunkelmodus mit der Zuordnung und der Beispielseite in Dunkel.
• Der Schalter Hell und Dunkel wechselt die Beispielseite im Editor, die UI-Elemente und die Ansicht in der Abstimmung.
• Der Vergleich zweier Fassungen zeigt, was sich am Dunkelmodus geändert hat.

Im Code

Der Export legt den Dunkelmodus als Verweise auf die Farben ab, damit du ihn auf deine eigenen Variablen setzen kannst: --dark-ground: var(--color-…) in CSS, --color-dark-ground in Tailwind, $dark-ground in SCSS und eine Gruppe dark in den Design Tokens.