Styling & themes

Classes

Built-in classes follow one colour language: success, info, warn, danger, accent, muted. Add your own with classDef.

flowchart LR
  a[Healthy]:::success --> b[Degraded]:::warn --> c[Down]:::danger
  d[Custom]:::brand
  classDef brand fill:#fdf4ff,stroke:#c026d3,color:#86198f

Themes

theme: auto (default) follows the OS, and also data-theme="dark" or .dark on the page. Force with light / dark.

CSS variables

.vc {
  --vc-node-fill: var(--vhyx-color-surface);   /* e.g. map to VhyxUI tokens */
  --vc-node-stroke: var(--vhyx-color-border);
  --vc-blue: var(--vhyx-color-info);
  --vc-token: var(--vhyx-color-accent);
}