Theming

AgentStat ships a light and a dark theme. All text clears WCAG AA contrast, and every color of the default palette is at least 3:1 against both backgrounds.

Pick a theme

<AgentStat agents={agents} theme="system" />

`theme`	Result
`'light'`, `'dark'`	That theme.
`'system'`	Follows the OS setting and switches with it.
unset	Dark if `styles.background` is dark, else light.

If your app has its own theme switch, pass its resolved value ('light' or 'dark') so the chart switches with the page. Switching doesn't animate colors.

The components take the same theme prop, defaulting to 'system'.

Match your surface

styles overrides four colors. Each accepts any CSS color, including a custom property:

<AgentStat
  agents={agents}
  theme="dark"
  styles={{
    background: 'var(--surface-1)',
    borderColor: 'var(--border)',
    textColor: 'var(--text)',
    gridColor: 'var(--grid)',
  }}
/>

Set theme explicitly when background is a custom property; it can only be inferred from a color it can read.

Agent colors

Omit color on agents, and they take the next color of the theme's palette. The palette is hue-distinct and switches with the theme:

#	Light	Dark
1	`#2563eb`	`#60a5fa`
2	`#d9480f`	`#ff8a4c`
3	`#0f8a5f`	`#34d399`
4	`#c2255c`	`#f472b6`
5	`#7048e8`	`#a78bfa`
6	`#0b7285`	`#22d3ee`
7	`#a16207`	`#facc15`
8	`#3f3f46`	`#d4d4d8`

An explicit color (any CSS color) stays the same in both themes, so check it against both backgrounds. Status and anomaly colors are separate from the palette, and never carry meaning alone: statuses have words and icons, severities have marker shapes.

Size

height takes pixels or any CSS length; the width is always 100% of the container. On charts under 560 × 340 px the per-agent panel steps aside (panel="auto"); pass panel="always" or "never" to decide yourself.