Dark Mode

Miragon-Apps und Miragon-Webseiten haben einen Dark Mode aus derselben Quelle wie der helle Modus. Er tauscht nur die Rollen: Schwarz ist der Grund, darüber liegen neutrale Stufen, Text ist Weiß und Links sind Grün.

LeistungenBlog

Prozesse schneller automatisieren

Leiser Text in text-leise, nie mit Deckkraft.

Fließtext mit unterstrichenem Link.

Termin buchenMehr erfahren

Karte in grauer Sektioneine Stufe heller, mit KanteE-Maildu@firma.de

Footer, in beiden Modi SchwarzImpressum

Hell

LeistungenBlog

Prozesse schneller automatisieren

Leiser Text in text-leise, nie mit Deckkraft.

Fließtext mit unterstrichenem Link.

Termin buchenMehr erfahren

Karte in grauer Sektioneine Stufe heller, mit KanteE-Maildu@firma.de

Footer, in beiden Modi SchwarzImpressum

Dunkel

Beide Hälften folgen denselben Regeln. Die rechte setzt nur data-cd-theme="dark", alle Farben kommen aus den Rollen --cd-ui-*. Der zweite Button zeigt den Fokusrahmen, der Umschalter oben rechts die gewählte Darstellung. Diese Doku ist selbst eine Webseite mit Dark Mode: Schalte oben rechts um und sieh dir jede Seite in beiden Modi an.

Auf einen Blick

	Hell	Dunkel
Grund	Grau in Apps, Weiß auf Webseiten	Schwarz #1D1D1D
Flächen darüber	Weiß	neutral, 5 bis 12 % Weiß in Schwarz
Text	Schwarz, leise #6B6666	Weiß, leise #BBBBBB
Links	blau-link #2B50D4	Grün #00E676
Buttons	Blau mit weißer Schrift	Blau mit weißer Schrift
Fokus und Auswahl	blau-link und Blau	blau-hell #6B8AFF
Status	Statusfarbe, Tönung als Fläche	heller Wert, Fläche ohne Tönung
Wortmarke	Grün	Weiß
Exporte, Druck, E-Mail	hell	hell

• Der Dark Mode ist ein zweiter Satz Rollen über der Palette. Palette, Statusfarben und ui.* bleiben fest, nur die Variablen --cd-ui-* schalten um.
• Er gilt für Apps (Modeler als Web-App, VS-Code-Webview, IntelliJ-Plugin, Standalone), für Webseiten (miragon.io, Landingpages) und für diese Doku.
• Er ist Opt-in. Erst data-cd-theme am <html> schaltet ihn ein. Ohne das Attribut bleibt alles hell, auch mit der neuen Token-CSS.

Flächen

Klick auf ein Feld, um den Wert zu kopieren. Unter jedem Feld stehen die Rollen, die ihn dunkel nutzen.

• color.schwarz

  grund, plot, seite

• neutral.05

  flaeche, abschnitt, success-flaeche, warning-flaeche, danger-flaeche, info-flaeche

• neutral.08

  flaeche-hoch

• neutral.12

  hover

• neutral.18

  linie

• neutral.70

  text-leise

flaeche · 5 %

Panel, Karte, Seitenleiste

Leiser Text: text-leise, 70 %

flaeche-hoch · 8 %

Menüeintrag

Hover · 12 %

---

Linie darüber · 18 %

grund · Schwarz

• Schwarz ist der Grund. App-Grund, Canvas, Plot und Seitengrund sind dunkel #1D1D1D. Nichts ist dunkler, reines #000 gibt es nicht.
• Höher heißt heller, und zwar neutral. Jede Stufe ist Weiß in Schwarz gemischt: Kanal = round(29 + 226 × Anteil). Daraus folgt R = G = B, ohne Farbton.
• Jede Fläche über dem Grund hat 1px Rand in --cd-ui-linie. Dunkel trägt die Linie die Höhe, Schatten sind dort kaum zu sehen.
• Dunkelblau nur im Verlauf. Keine Fläche ist blau, grün oder statusfarben getönt, auch nicht über Deckkraft.

EintragHover, 12 % neutral

✓ GutHover, Auswahl und Kacheln liegen auf der neutralen Stufe --cd-ui-hover.

EintragBlau 12 % über Schwarz

✗ NichtFarbe mit Deckkraft über Dunkel ergibt einen getönten Ton, hier Dunkelblau. Das gilt auch für Grün, Tönungen und Deaktiviert über Deckkraft.

Rollen

Alle Rollen mit Hell- und Dunkel-Wert, gelesen aus brand/tokens.json. Unter jedem Wert steht der Token, aus dem er kommt. Der Hell-Wert jeder Farbrolle ist ein bestehender Token, die hellen Farben bleiben also gleich. Backdrop (Schwarz 42 %) und die Deckkraft schwebender Karten (84 %) haben keinen Token, sie kommen aus dem bisherigen Design-System. Was sich im Hellen am Verhalten ändert, etwa Backdrop mit Filter, Deaktiviert ohne Deckkraft und Lasso ohne Füllung, steht im CHANGELOG zu 1.9.0.

Rolle und Einsatz	Hell	Dunkel
--cd-ui-grundApp-Grund, Canvas-Umgebung mit Punktraster, eingelassene Eingabefelder. Dunkel Schwarz, nichts ist dunkler.	#F9F7F7color.grau	#1D1D1Dcolor.schwarz
--cd-ui-flaecheAngedocktes Panel, Seitenleiste, Karte. Jede Fläche über dem Grund hat 1px Rand in rolle.linie.	#FFFFFFcolor.weiss	#282828neutral.05
--cd-ui-flaeche-hochSchwebende Fläche: Menü, Palette, Context-Pad, Eigenschaften, Popover, Dialog, Toast, Tooltip.	#FFFFFFcolor.weiss	#2F2F2Fneutral.08
--cd-ui-hoverHover, gedrückter und gewählter Eintrag, aktives Werkzeug, Drop-Zone. Hell Blau-soft wie bisher, dunkel neutral.	#EEF1FDfunctional.info-soft	#383838neutral.12
--cd-ui-plotZeichenfläche: Plot, Standardfüllung der Elemente, Label-Halo. Dunkel Schwarz wie die Umgebung, Exporte bleiben hell.	#FFFFFFcolor.weiss	#1D1D1Dcolor.schwarz
--cd-ui-seiteSeitenrolle für Webseiten und die Doku: Seitengrund (html, body), weiße Sektion, Navigation, Eingabefeld auf Webseiten. Dunkel Schwarz wie rolle.grund.	#FFFFFFcolor.weiss	#1D1D1Dcolor.schwarz
--cd-ui-abschnittSeitenrolle für Webseiten und die Doku: graue Sektion, Codeblock, Tabellenkopf, Zitat, Seitenleiste der Doku. Dunkel 5 % wie rolle.flaeche, nie rolle.flaeche-hoch unter Code.	#F9F7F7color.grau	#282828neutral.05
--cd-ui-linieTrennlinien, Rahmen schwebender Flächen, Plotrand, Hilfslinien, Punktraster. Dekorativ, trägt dunkel die Höhe.	#E6E2E2ui.linie	#464646neutral.18
--cd-ui-konturEingaberahmen, Checkbox, Achsen, Kanten, Abhängigkeiten, Unterleger unter schwachen Fremdstrichen. In beiden Modi gleich.	#8F8A8Aui.kontur	#8F8A8Aui.kontur
--cd-ui-textText, Standard-Icons (currentColor), Elementkontur und Beschriftung auf dem Canvas.	#1D1D1Dcolor.schwarz	#FFFFFFcolor.weiss
--cd-ui-text-leiseSekundärer Text, Platzhalter, Tastenkürzel, Achsentext, deaktivierte Elemente.	#6B6666ui.text-leise	#BBBBBBneutral.70
--cd-ui-linkLinks und Akzenttext, im Fließtext unterstrichen. Dunkel Grün.	#2B50D4color.blau-link	#00E676color.gruen
--cd-ui-icon-akzentLucide-Icon mit Akzent, höchstens eins je Reihe. Dunkel Grün.	#335DE5color.blau	#00E676color.gruen
--cd-ui-fokusFokusrahmen 2px mit 2px Abstand an jedem interaktiven Element.	#2B50D4color.blau-link	#6B8AFFcolor.blau-hell
--cd-ui-interaktionAuswahl, Hover-Kontur, aktiver Indikator, Haken der Checkbox, Lasso- und Griffrand, Flow-Kante. Nie Fläche, dunkel nie Text.	#335DE5color.blau	#6B8AFFcolor.blau-hell
--cd-ui-successRand, Icon und Statuspunkt für Erfolg, dunkel auch Text. Hell nie Text und nie allein.	#00E676functional.success	#00E676functional.success-hell
--cd-ui-warningRand, Icon und Statuspunkt für Warnung, dunkel auch Text. Hell nie Text und nie allein.	#FFB000functional.warning	#FFB000functional.warning-hell
--cd-ui-dangerRand, Icon, Statuspunkt und Fehlertext, Movement auf dem Canvas. Dunkel nicht als Text auf rolle.hover.	#CD1839functional.danger	#FB6D73functional.danger-hell
--cd-ui-infoRand, Icon, Statuspunkt und Hinweistext. Dunkel als Text nur auf rolle.grund, rolle.flaeche und den Seitenrollen, nicht auf rolle.flaeche-hoch und rolle.hover.	#335DE5functional.info	#6B8AFFfunctional.info-hell
--cd-ui-success-flaecheFläche von Status-Kasten und getöntem Badge für Erfolg. Dunkel ohne Tönung, den Status tragen Rand und Icon.	#DAFBEBfunctional.success-soft	#282828neutral.05
--cd-ui-warning-flaecheWie success-flaeche, für Warnung.	#FFF1D2functional.warning-soft	#282828neutral.05
--cd-ui-danger-flaecheWie success-flaeche, für Fehler.	#FBEEF0functional.danger-soft	#282828neutral.05
--cd-ui-info-flaecheWie success-flaeche, für Hinweise.	#EEF1FDfunctional.info-soft	#282828neutral.05
--cd-ui-wortmarkeWortmarke als Inline-SVG. Dunkel Weiß, Grün bleibt erlaubte Alternative.	#00E676color.gruen	#FFFFFFcolor.weiss
--cd-ui-backdropDialog-Backdrop, immer Schwarz mit Deckkraft und backdrop-filter: blur(3px) grayscale(1). Hell 42 %, dunkel 60 %.	rgba(29, 29, 29, 0.42)	rgba(29, 29, 29, 0.6)
--cd-ui-chrome-deckkraftDeckkraft schwebender Karten über dem Canvas: hell Glas, dunkel und im Hochkontrast deckend.	84%	100%

Alle Rollen als Tabelle zum Kopieren

Rolle	CSS-Variable	Hell	Dunkel	Einsatz
grund	--cd-ui-grund	#F9F7F7 (color.grau)	#1D1D1D (color.schwarz)	App-Grund, Canvas-Umgebung mit Punktraster, eingelassene Eingabefelder. Dunkel Schwarz, nichts ist dunkler.
flaeche	--cd-ui-flaeche	#FFFFFF (color.weiss)	#282828 (neutral.05)	Angedocktes Panel, Seitenleiste, Karte. Jede Fläche über dem Grund hat 1px Rand in rolle.linie.
flaeche-hoch	--cd-ui-flaeche-hoch	#FFFFFF (color.weiss)	#2F2F2F (neutral.08)	Schwebende Fläche: Menü, Palette, Context-Pad, Eigenschaften, Popover, Dialog, Toast, Tooltip.
hover	--cd-ui-hover	#EEF1FD (functional.info-soft)	#383838 (neutral.12)	Hover, gedrückter und gewählter Eintrag, aktives Werkzeug, Drop-Zone. Hell Blau-soft wie bisher, dunkel neutral.
plot	--cd-ui-plot	#FFFFFF (color.weiss)	#1D1D1D (color.schwarz)	Zeichenfläche: Plot, Standardfüllung der Elemente, Label-Halo. Dunkel Schwarz wie die Umgebung, Exporte bleiben hell.
seite	--cd-ui-seite	#FFFFFF (color.weiss)	#1D1D1D (color.schwarz)	Seitenrolle für Webseiten und die Doku: Seitengrund (html, body), weiße Sektion, Navigation, Eingabefeld auf Webseiten. Dunkel Schwarz wie rolle.grund.
abschnitt	--cd-ui-abschnitt	#F9F7F7 (color.grau)	#282828 (neutral.05)	Seitenrolle für Webseiten und die Doku: graue Sektion, Codeblock, Tabellenkopf, Zitat, Seitenleiste der Doku. Dunkel 5 % wie rolle.flaeche, nie rolle.flaeche-hoch unter Code.
linie	--cd-ui-linie	#E6E2E2 (ui.linie)	#464646 (neutral.18)	Trennlinien, Rahmen schwebender Flächen, Plotrand, Hilfslinien, Punktraster. Dekorativ, trägt dunkel die Höhe.
kontur	--cd-ui-kontur	#8F8A8A (ui.kontur)	#8F8A8A (ui.kontur)	Eingaberahmen, Checkbox, Achsen, Kanten, Abhängigkeiten, Unterleger unter schwachen Fremdstrichen. In beiden Modi gleich.
text	--cd-ui-text	#1D1D1D (color.schwarz)	#FFFFFF (color.weiss)	Text, Standard-Icons (currentColor), Elementkontur und Beschriftung auf dem Canvas.
text-leise	--cd-ui-text-leise	#6B6666 (ui.text-leise)	#BBBBBB (neutral.70)	Sekundärer Text, Platzhalter, Tastenkürzel, Achsentext, deaktivierte Elemente.
link	--cd-ui-link	#2B50D4 (color.blau-link)	#00E676 (color.gruen)	Links und Akzenttext, im Fließtext unterstrichen. Dunkel Grün.
icon-akzent	--cd-ui-icon-akzent	#335DE5 (color.blau)	#00E676 (color.gruen)	Lucide-Icon mit Akzent, höchstens eins je Reihe. Dunkel Grün.
fokus	--cd-ui-fokus	#2B50D4 (color.blau-link)	#6B8AFF (color.blau-hell)	Fokusrahmen 2px mit 2px Abstand an jedem interaktiven Element.
interaktion	--cd-ui-interaktion	#335DE5 (color.blau)	#6B8AFF (color.blau-hell)	Auswahl, Hover-Kontur, aktiver Indikator, Haken der Checkbox, Lasso- und Griffrand, Flow-Kante. Nie Fläche, dunkel nie Text.
success	--cd-ui-success	#00E676 (functional.success)	#00E676 (functional.success-hell)	Rand, Icon und Statuspunkt für Erfolg, dunkel auch Text. Hell nie Text und nie allein.
warning	--cd-ui-warning	#FFB000 (functional.warning)	#FFB000 (functional.warning-hell)	Rand, Icon und Statuspunkt für Warnung, dunkel auch Text. Hell nie Text und nie allein.
danger	--cd-ui-danger	#CD1839 (functional.danger)	#FB6D73 (functional.danger-hell)	Rand, Icon, Statuspunkt und Fehlertext, Movement auf dem Canvas. Dunkel nicht als Text auf rolle.hover.
info	--cd-ui-info	#335DE5 (functional.info)	#6B8AFF (functional.info-hell)	Rand, Icon, Statuspunkt und Hinweistext. Dunkel als Text nur auf rolle.grund, rolle.flaeche und den Seitenrollen, nicht auf rolle.flaeche-hoch und rolle.hover.
success-flaeche	--cd-ui-success-flaeche	#DAFBEB (functional.success-soft)	#282828 (neutral.05)	Fläche von Status-Kasten und getöntem Badge für Erfolg. Dunkel ohne Tönung, den Status tragen Rand und Icon.
warning-flaeche	--cd-ui-warning-flaeche	#FFF1D2 (functional.warning-soft)	#282828 (neutral.05)	Wie success-flaeche, für Warnung.
danger-flaeche	--cd-ui-danger-flaeche	#FBEEF0 (functional.danger-soft)	#282828 (neutral.05)	Wie success-flaeche, für Fehler.
info-flaeche	--cd-ui-info-flaeche	#EEF1FD (functional.info-soft)	#282828 (neutral.05)	Wie success-flaeche, für Hinweise.
wortmarke	--cd-ui-wortmarke	#00E676 (color.gruen)	#FFFFFF (color.weiss)	Wortmarke als Inline-SVG. Dunkel Weiß, Grün bleibt erlaubte Alternative.
backdrop	--cd-ui-backdrop	rgba(29, 29, 29, 0.42)	rgba(29, 29, 29, 0.6)	Dialog-Backdrop, immer Schwarz mit Deckkraft und backdrop-filter: blur(3px) grayscale(1). Hell 42 %, dunkel 60 %.
chrome-deckkraft	--cd-ui-chrome-deckkraft	84%	100%	Deckkraft schwebender Karten über dem Canvas: hell Glas, dunkel und im Hochkontrast deckend.

Hochkontrast (data-cd-kontrast="hoch" auf demselben Element wie data-cd-theme): linie nimmt den Wert von kontur, kontur nimmt den Wert von text, text-leise nimmt den Wert von text und chrome-deckkraft wird 100 %, jeweils im selben Modus.

Zwei der Rollen sind Seitenrollen für Webseiten und diese Doku: --cd-ui-seite für Seitengrund, weiße Sektion und Eingabefeld (hell Weiß, dunkel Schwarz) und --cd-ui-abschnitt für graue Sektion, Codeblock, Tabellenkopf und Seitenleiste (hell Grau, dunkel #282828). Apps liegen auf --cd-ui-grund.

In Komponenten nimmst du nur Rollen. Palette und Statusfarben direkt nur für Buttons, Badges, Fachflächen und feste Bühnen.

Regeln

Text und Links

• Text --cd-ui-text, dunkel Weiß, auch im Fließtext. Leiser Text --cd-ui-text-leise, dunkel #BBBBBB. Nie Text mit Deckkraft.
• Links --cd-ui-link, dunkel Grün, im Fließtext unterstrichen. Hover mit dickerem Unterstrich, ohne zweite Farbe.
• Blau und blau-link sind auf Dunkel nie Text (3,08 und 2,57:1 auf Schwarz).
• Markierter Text liegt dunkel auf #383838 mit weißer Schrift.

Buttons und Eingaben

• Primär ist in beiden Modi Blau mit weißer Schrift (5,47:1), Hover blau-link. Grün ist nie Button-Fläche, Weiß auf Grün hat nur 1,67:1.
• Sekundär auf --cd-ui-flaeche-hoch mit Rand --cd-ui-linie, Hover auf --cd-ui-hover.
• Deaktiviert ist deckend und neutral, nie über Deckkraft: Blau 50 % über Schwarz wäre Dunkelblau.
• Eingabefeld eingelassen auf dem Grund, Rand --cd-ui-kontur (#8F8A8A in beiden Modi). Checkbox mit Rand und Haken in --cd-ui-interaktion, ohne blaue Füllung.

Fokus

• outline: 2px solid var(--cd-ui-fokus); outline-offset: 2px; an jedem interaktiven Element. Dunkel ist der Fokus blau-hell (5,38 bis 3,74:1).
• Der Abstand ist Pflicht: Direkt am blauen Button hätte blau-hell nur 1,75:1.
• Auf Verlauf und Mesh trägt der Fokus einen Doppelring, innen Schwarz, außen Weiß. Probier es mit der Tabulatortaste im Kopf der Startseite.

Status

Dunkel tragen Rand, Icon und Statuspunkt den Status in den hellen Werten, die Fläche bleibt neutral. Die Tönungen (-soft) stehen nie auf Dunkel. Das volle Badge ist in beiden Modi gleich.

GespeichertDie Änderungen sind übernommen.

LäuftLäuft

AchtungZwei Felder sind noch leer.

VerzögertVerzögert

FehlerDie Datei konnte nicht gelesen werden.

GestopptGestoppt

HinweisEine neue Version ist verfügbar.

NeuNeu

Ob ein Status als Text stehen darf, hängt von Modus und Fläche ab. Wo die Regel Text verbietet, ist der Text Schwarz bzw. Weiß und die Farbe trägt Icon, Rand oder Punkt. Die Regel steht in brand/tokens.json (textAuf):

Status	CSS-Variable	Hell als Text	Dunkel als Text
success	--cd-ui-success	nie Text, nur Rand, Icon und Punkt neben Text	auf allen Flächen
warning	--cd-ui-warning	nie Text, nur Rand, Icon und Punkt neben Text	auf allen Flächen
danger	--cd-ui-danger	auf allen Flächen	nur auf grund, flaeche, flaeche-hoch, seite und abschnitt
info	--cd-ui-info	auf allen Flächen	nur auf grund, flaeche, seite und abschnitt

Dieselbe Regel mit den Zahlen im Dunkeln:

Status dunkel	grund#1D1D1D	flaeche#282828	flaeche-hoch#2F2F2F	hover#383838	Anspruch
success#00E676	10,10 ✓erfüllt	8,83 ✓erfüllt	8,02 ✓erfüllt	7,02 ✓erfüllt	Text 4,5:1
warning#FFB000	9,20 ✓erfüllt	8,05 ✓erfüllt	7,31 ✓erfüllt	6,40 ✓erfüllt	Text 4,5:1
danger#FB6D73	6,05 ✓erfüllt	5,29 ✓erfüllt	4,81 ✓erfüllt	4,21 als Text nicht erlaubt	Text 4,5:1
info#6B8AFF	5,38 ✓erfüllt	4,71 ✓erfüllt	4,27 als Text nicht erlaubt	3,74 als Text nicht erlaubt	Text 4,5:1

Gestrichelt heißt: als Text nicht erlaubt. Die Zahl nennt den Kontrast der Statusfarbe auf der Fläche, die Farbe zeigt der Balken. Der Text ist dort Schwarz bzw. Weiß, die Statusfarbe trägt Icon, Rand oder Punkt.

Kontraste dunkel

Jede Rolle auf jeder dunklen Fläche, berechnet aus den Tokens. Alle Paare mit Anspruch sind erfüllt, die Linie ist dekorativ. Die hellen Werte und die Palette stehen unter Barrierefreiheit.

Rolle dunkel	grund#1D1D1D	flaeche#282828	flaeche-hoch#2F2F2F	hover#383838	Anspruch
linie#464646	1,79	1,56	1,42	1,24	dekorativ
kontur#8F8A8A	4,95 ✓erfüllt	4,33 ✓erfüllt	3,93 ✓erfüllt	3,45 ✓erfüllt	Nicht-Text 3:1
text#FFFFFF	16,86 ✓erfüllt	14,74 ✓erfüllt	13,39 ✓erfüllt	11,73 ✓erfüllt	Text 4,5:1
text-leise#BBBBBB	8,78 ✓erfüllt	7,68 ✓erfüllt	6,97 ✓erfüllt	6,11 ✓erfüllt	Text 4,5:1
link#00E676	10,10 ✓erfüllt	8,83 ✓erfüllt	8,02 ✓erfüllt	7,02 ✓erfüllt	Text 4,5:1
icon-akzent#00E676	10,10 ✓erfüllt	8,83 ✓erfüllt	8,02 ✓erfüllt	7,02 ✓erfüllt	Nicht-Text 3:1
fokus#6B8AFF	5,38 ✓erfüllt	4,71 ✓erfüllt	4,27 ✓erfüllt	3,74 ✓erfüllt	Nicht-Text 3:1
interaktion#6B8AFF	5,38 ✓erfüllt	4,71 ✓erfüllt	4,27 ✓erfüllt	3,74 ✓erfüllt	Nicht-Text 3:1

Schatten, Logo und Icons

• Schatten bleiben, sind dunkel aber fast unsichtbar. Die Höhe tragen die hellere Stufe und die Linie. Kein Schatten aus #000.
• Wortmarke über --cd-ui-wortmarke: hell Grün, dunkel Weiß. Grün bleibt dunkel erlaubt. Über Blau, Verlauf und Mesh fest Weiß.
• Komet, Favicon und App-Icon bleiben unverändert, ohne Rand und ohne Glow.
• Lucide-Icons in --cd-ui-text, der Akzent in --cd-ui-icon-akzent (hell Blau, dunkel Grün, höchstens eins je Reihe).
• Modeler-Icons: Datei-Icons -hell auf hellen, -dunkel auf dunklen Oberflächen. Das Mono-Glyph erbt die Textfarbe. Siehe Modeler-Icons.

Moduswahl

Der Modus kommt vom System, vom Host oder von der Person. Die Farben kommen immer aus der CI.

Wo	Modus kommt von	So
Web-App	Wahl der Person, Standard System	Menü „Darstellung“ mit System, Hell, Dunkel
VS Code	Host: activeColorTheme.kind	Attribut beim Rendern, Wechsel per postMessage
IntelliJ	Host: JBColor.isBright()	Attribut im HTML-Template, Wechsel per executeJavaScript
Electron, Tauri	System oder Wahl	Seite auf system, Fenstergrund aus der JSON
Webseite	Wahl der Person, Standard System	Umschalter im Header
Diese Doku	Umschalter von VitePress	startet mit System

• data-cd-theme ist light, dark oder system, auf <html> oder einem Container. Hochkontrast schaltet data-cd-kontrast="hoch" auf demselben Element.
• Die Wahl liegt in localStorage unter miragon.darstellung. „System“ löscht den Eintrag.
• Host-Farben wie --vscode-editor-background übernimmst du nicht. Unter einem blauen Editor-Theme bleibt die Webview Schwarz.
• theme-color der Browser-Leiste ist dunkel #1D1D1D, per media neben dem hellen Wert.

Canvas und Export

Kopieren ⌘CEinfügen ⌘VDarstellungSystemHell Dunkel

Gespeichert

Hell

Kopieren ⌘CEinfügen ⌘VDarstellungSystemHell Dunkel

Gespeichert

Dunkel

• Plot dunkel Schwarz wie die Umgebung, Punktraster in --cd-ui-linie. Elementkontur und Beschriftung Weiß, Auswahl und Flow in blau-hell.
• Rendern: Renderer zeichnen mit den hellen Werten aus cd-tokens.generated.json. Die Rollen-Klassen cd-c-* aus cd-canvas.css setzen dunkel die Rollen. Der Wechsel ist reines CSS, ohne Neuzeichnen.
• Fremdnotation (Event-Storming-Stickies, Team-Topologies-Teams, Context-Maps-Subdomänen) bleibt hell, wie Papier auf dunklem Tisch. Striche unter 3:1 bekommen einen Unterleger in --cd-ui-kontur.
• Nutzerfarben bleiben, wie sie gespeichert sind.
• Exporte sind immer hell: SVG, PNG, Zwischenablage und Vorschaubilder. Der SVG-Export im Dark Mode ist bytegleich zum Export im Hellen.
• style dark in Wardley Maps und Event Storming wird beim Rendern ignoriert.

Webseiten

Webseiten haben denselben Dark Mode wie Apps: dieselbe Token-Datei, dieselben Rollen, dasselbe Attribut. Anders ist: Sie liegen hell auf Weiß, haben Sektionen, Bilder und fremde Widgets, und den Modus wählt die Person selbst.

Einbau

Kopier assets/cd-tokens.generated.css aus der Skill corporate-design unverändert ins Repo und überschreib sie bei jedem Update. Das Skript steht im <head> nach den Meta-Tags und vor dem ersten Stylesheet, so flackert nichts:

<html lang="de" data-cd-theme="system">
<head>
  <meta name="color-scheme" content="light dark">
  <meta name="theme-color" content="#FFFFFF"
        media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1D1D1D"
        media="(prefers-color-scheme: dark)">
  <script>
    function cdDarstellung() {
      const html = document.documentElement
      let wahl = null
      try { wahl = localStorage.getItem('miragon.darstellung') } catch (e) {}
      if (wahl === 'light' || wahl === 'dark') {
        html.dataset.cdTheme = wahl
        document.querySelector('meta[name="color-scheme"]').content = wahl
        const farbe = wahl === 'dark' ? '#1D1D1D' : '#FFFFFF'
        for (const m of document.querySelectorAll('meta[name="theme-color"]')) {
          m.content = farbe
        }
      }
      if (matchMedia('(prefers-contrast: more)').matches) {
        html.dataset.cdKontrast = 'hoch'
      }
    }
    cdDarstellung()
    // nur mit Astro ClientRouter
    document.addEventListener('astro:after-swap', cdDarstellung)
  </script>
  <link rel="stylesheet" href="/styles/cd-tokens.generated.css">

• Umschalter im Header rechts vor dem Call-to-Action: System, Hell, Dunkel als Radiogruppe mit den Lucide-Icons monitor, sun und moon. Die Wahl bekommt --cd-ui-hover und einen Ring in --cd-ui-interaktion. Mobil steht er mit Text im Menü, ohne JavaScript bleibt er ausgeblendet.
• Astro: Das Skript braucht is:inline, sonst läuft es erst nach dem ersten Paint.
• Tailwind: dark: an das Attribut koppeln, helle Inseln ausgenommen, Theme-Farben mit @theme inline auf die Rollen legen und die Palette mit --color-*: initial abschalten. Tailwind-Grautöne, bg-black, dark:bg-blue-950, Farben mit Deckkraft auf Dunkel und dark:prose-invert sind verboten.
• Schwarze Bühnen (Sektion, Footer) liegen auf --cd-ui-seite unter data-cd-theme="dark", nie fest auf --cd-schwarz mit Rollen-Text. Gedruckt gelten die hellen Rollen, dann kippen Fläche und Text gemeinsam.

Sektionen

Element	Hell	Dunkel	Rolle
Seitengrund, weiße Sektion, Eingabefeld	Weiß	Schwarz	--cd-ui-seite
Graue Sektion, Codeblock, Tabellenkopf	Grau	5 %	--cd-ui-abschnitt
Karte in grauer Sektion	Weiß	8 %	--cd-ui-flaeche-hoch, Rand --cd-ui-linie
Dropdown, mobiles Menü, Dialog, Tooltip	Weiß	8 %	--cd-ui-flaeche-hoch
Icon-Kachel, Tag, Hover in Listen	Blau-soft	12 %	--cd-ui-hover
Schwarze Sektion, Footer	Schwarz	Schwarz	data-cd-theme="dark", Fläche --cd-ui-seite, Kante --cd-ui-linie
Blau, Marken-Verlauf, Mesh-Hero	fest	wie hell	feste Bühne

Feste Bühnen sehen in beiden Modi gleich aus. Text, Links und Icons sind Weiß, Links unterstrichen, Buttons hell mit schwarzer Schrift, der Fokus Weiß:

Feste blaue BühneLink in WeißButton hell

Grün, leiser Text und blau-hell fallen auf Blau durch (3,28, 2,85 und 1,75:1). Darum nimmt eine feste Bühne keine Rollen.

Auf den Seitenrollen halten alle Rollen ihren Anspruch, im Dunkeln so:

Rolle dunkel	seite#1D1D1D	abschnitt#282828	Anspruch
linie#464646	1,79	1,56	dekorativ
kontur#8F8A8A	4,95 ✓erfüllt	4,33 ✓erfüllt	Nicht-Text 3:1
text#FFFFFF	16,86 ✓erfüllt	14,74 ✓erfüllt	Text 4,5:1
text-leise#BBBBBB	8,78 ✓erfüllt	7,68 ✓erfüllt	Text 4,5:1
link#00E676	10,10 ✓erfüllt	8,83 ✓erfüllt	Text 4,5:1
icon-akzent#00E676	10,10 ✓erfüllt	8,83 ✓erfüllt	Nicht-Text 3:1
fokus#6B8AFF	5,38 ✓erfüllt	4,71 ✓erfüllt	Nicht-Text 3:1
interaktion#6B8AFF	5,38 ✓erfüllt	4,71 ✓erfüllt	Nicht-Text 3:1
success#00E676	10,10 ✓erfüllt	8,83 ✓erfüllt	Text 4,5:1
warning#FFB000	9,20 ✓erfüllt	8,05 ✓erfüllt	Text 4,5:1
danger#FB6D73	6,05 ✓erfüllt	5,29 ✓erfüllt	Text 4,5:1
info#6B8AFF	5,38 ✓erfüllt	4,71 ✓erfüllt	Text 4,5:1

Bilder

Bildart	Im Dark Mode
Fotos, Videos, Vorschaubilder	unverändert, ohne Filter
Grafik mit schwarzen Linien auf transparentem Grund	Variante -dunkel oder eine helle Fläche mit data-cd-theme="light"
Screenshots heller Apps, Diagramm-Exporte	bleiben hell, Rahmen --cd-ui-linie
Kunden- und Partnerlogos	Negativ-Variante oder helle Fläche
Inline-SVG	Farben über Rollen, dann schaltet die Grafik mit

Folgt die Seite nur dem System, reicht <picture> mit media="(prefers-color-scheme: dark)". Mit Umschalter nimmst du zwei Bilder mit den Hilfsklassen der Token-CSS:

<img class="cd-nur-hell" src="ablauf.svg"
     alt="Ablauf der Freigabe" loading="lazy">
<img class="cd-nur-dunkel" src="ablauf-dunkel.svg"
     alt="Ablauf der Freigabe" loading="lazy">

Nie invert(), hue-rotate(), brightness() oder mix-blend-mode an Bildern und iframes. Invertieren macht aus Blau einen Ockerton.

Fremd-Widgets

• Hat ein Widget einen neutralen Dark Mode, übergibst du den aufgelösten Modus, light oder dark, nie auto. Den liest getComputedStyle(element).colorScheme.
• Ohne Dark Mode oder mit bläulichem Dunkel bleibt es hell, auf einer hellen Karte mit data-cd-theme="light". Das gilt auch für Karten und Kalender.
• Lässt ein Widget Farben setzen, nimmst du nur CI-Werte und nur, wenn jedes Paar die Kontraste hält.

Nicht betroffen

• E-Mails bleiben hell.
• Druck ist immer hell, die Dunkel-Blöcke der Token-CSS gelten nur auf dem Bildschirm.
• PDF, Social-Kacheln, og:image und Brand-Kit haben keinen Modus.
• Favicon und App-Icon bleiben.

Abnahme

• Jede Seitenvorlage und jede Ansicht in Hell, Dunkel und System gesehen, Webseiten mit und ohne JavaScript.
• Kein Flackern beim Laden und beim Seitenwechsel, die Wahl bleibt nach dem Neuladen.
• Jede dunkle Fläche ist Schwarz oder eine neutrale Stufe, nichts ist getönt.
• Bilder, Logos, Screenshots und Fremd-Widgets im Dunkeln geprüft.
• Hochkontrast (data-cd-kontrast="hoch", bei Webseiten über prefers-contrast: more) und erzwungene Farben angesehen: Rahmen sichtbar, keine Schatten, Fokus 3px, nichts verschwindet.
• Exporte und Druckvorschau hell, auch schwarze Sektionen und Footer, brand-lint ohne Befunde.

In Claude

Die Regeln stecken in den Skills, Claude wendet sie beim Bauen an:

Skill	Wofür im Dark Mode
modeler-tool-design	Apps und Modeler: Token-CSS, Rollen als JSON und cd-canvas.css für den Canvas
corporate-design	Webseiten: Token-CSS, Seitenrollen, Umschalter, Bilder
brand-review	prüft UI und Webseiten in beiden Modi