Skip to content
MildportMildport

Theming

The widget themes through light-DOM CSS custom properties — --mildport-* tokens you set on (or above) the element. Any design system, dark mode included. No Shadow DOM piercing, no !important wars.

.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;
}

A representative token set:

Token Purpose
--mildport-bg / --mildport-fg Base background and text.
--mildport-surface / --mildport-border Cards, panels, hairlines.
--mildport-primary / --mildport-primary-fg Accent and its contrast colour.
--mildport-success / --mildport-warning / --mildport-danger Validation states.
--mildport-radius / --mildport-font Corner radius and type.
--mildport-grid-* Review-grid header, cells, selection.