Light and dark mode

The web provider can inherit the page mode, follow the system, or use a fixed mode.

tsx

<Chart.Provider colorMode="system">
  <Dashboard />
</Chart.Provider>

// Other values: "light", "dark", "inherit"

On native, pass colorMode to an individual chart when you need to override the OS setting.

CSS variables

Web themes map to --zyplot-* variables. You can override them in CSS.

css

.brand-charts {
  --zyplot-color-categorical-1: #6d28d9;
  --zyplot-color-grid: #e4e4e7;
  --zyplot-color-label: #71717a;
  --zyplot-font-family: Inter, sans-serif;
}