Theming

Use Chart.Provider for shared defaults or pass theme to one chart.

tsx

import { Chart } from '@hzblj/zyplot'
import type { ReactNode } from 'react'

const theme = {
  colors: {
    categorical: ['#6d28d9', '#0284c7', '#ea580c'],
    grid: '#e4e4e7',
    label: '#71717a',
    positive: '#16a34a',
    negative: '#dc2626',
  },
  typography: { fontFamily: 'Inter' },
}

export function Dashboard({ children }: { children: ReactNode }) {
  return <Chart.Provider theme={theme}>{children}</Chart.Provider>
}

Theme keys

Name	Type	Default	Description
`categorical`	`string[]`	—	Series colors in order.
`axis / grid`	`string`	—	Axis and grid colors.
`label`	`string`	—	Labels and tooltip text.
`positive / negative`	`string`	—	Positive and negative values.
`surface / track`	`string`	—	Tooltip background and gauge track.
`fontFamily`	`string`	—	Font family available on the target platform.

Surface

tsx

const chart = zyplot(z => ({
  ...data,
  surface: z.surface({
    background: '#0b0b0b',
    border: { color: '#27272a', width: 1 },
    cornerRadius: 16,
    padding: 16,
  }),
}))

return <Chart.Line {...chart} />

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 inside the chart builder when you need to override the OS setting.

tsx

const chart = zyplot(z => ({
  ...data,
  colorMode: 'dark',
}))

return <Chart.Line {...chart} />

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