Theming

Das Widget wird über Light-DOM-CSS-Custom-Properties thematisiert — --mildport-*-Tokens, die Sie auf (oder über) dem Element setzen. Jedes Designsystem, Dark Mode inklusive. Kein Durchstechen des Shadow DOM, keine !important-Kriege.

.mildport {
  --mildport-bg: #0b0e16;
  --mildport-fg: #e9e4d8;
  --mildport-surface: #141a26;
  --mildport-border: rgba(233, 228, 216, 0.14);
  --mildport-primary: #f2c97d;
  --mildport-primary-fg: #1a1206;
  --mildport-radius: 12px;
  --mildport-font: 'Inter Variable', system-ui, sans-serif;

  /* review grid */
  --mildport-grid-header-bg: #1a2230;
  --mildport-grid-cell-bg: #0f1620;
  --mildport-grid-selection: #f2c97d;
}

Ein repräsentativer Token-Satz:

Token	Zweck
`--mildport-bg` / `--mildport-fg`	Basis-Hintergrund und -Text.
`--mildport-surface` / `--mildport-border`	Karten, Panels, Trennlinien.
`--mildport-primary` / `--mildport-primary-fg`	Akzent und seine Kontrastfarbe.
`--mildport-success` / `--mildport-warning` / `--mildport-danger`	Validierungszustände.
`--mildport-radius` / `--mildport-font`	Eckenradius und Typografie.
`--mildport-grid-*`	Header, Zellen und Auswahl des Prüfrasters.