> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

The renderer draws with a **theme** — a set of tokens for colors, fonts and chrome. Pick a base theme with the `theme` prop, then layer per-token overrides with `themeOverrides`.

```tsx theme={null}
<GraphProvider input={spec} data={data} theme="dark">
  <GraphRenderer />
</GraphProvider>
```

## Light and dark

<ParamField path="theme" type="'light' | 'dark'" default="light">
  Selects the base token set. Drives series palettes, text colors, grid and
  tooltip chrome.
</ParamField>

## Overriding tokens

`themeOverrides` is a partial map of theme tokens layered over the base. Most tokens take a CSS string; the **measured font tokens** (`fontTickLabel`, `fontAxisLabel`, `fontLegendLabel`, `fontDataLabel`, and a few more) take a structured object so text measurement and paint stay in sync.

```tsx theme={null}
import type { ThemeOverrides } from '@graphysdk/react-renderer';

const overrides: ThemeOverrides = {
  textPrimary: '#1A1A1A',
  textSecondary: '#8F8F8F',
  gridLineColor: '#E9E9E9',
  gridLineWidth: '1px',
  fontFamilyDefault: "'Inter', sans-serif",
  fontFamilyHeading: "'Golos Text', sans-serif",
  fontAxisLabel: {
    family: "'Inter', sans-serif",
    size: { value: 10.5, unit: 'px' },
    weight: 500,
  },
};

<GraphProvider
  input={spec}
  data={data}
  theme="light"
  themeOverrides={overrides}
>
  <GraphRenderer />
</GraphProvider>;
```

An omitted field keeps the base theme's value, so `{ weight: 600 }` on a font token changes only the weight.

### Font token shape

A structured font override (`FontTokenOverride`) accepts any subset of:

<ParamField path="family" type="string">
  CSS `font-family`.
</ParamField>

<ParamField path="weight" type="number">
  Numeric font weight.
</ParamField>

<ParamField path="style" type="FontStyle">
  e.g. `'normal'` or `'italic'`.
</ParamField>

<ParamField path="size" type="{ value: number; unit: 'px' | 'em' }">
  Font size.
</ParamField>

<ParamField path="lineHeight" type="number">
  Unitless multiplier; sizes HTML line boxes (canvas measurement ignores it).
</ParamField>

## Custom fonts

If your spec references fonts by id (for example in rich-text titles), map those ids to CSS `font-family` strings with `fontList`:

```tsx theme={null}
<GraphProvider
  input={spec}
  data={data}
  fontList={[{ id: 'golos', fontFamily: "'Golos Text', sans-serif" }]}
>
  <GraphRenderer />
</GraphProvider>
```

Make sure the fonts are actually loaded on the page (via `@font-face` or a font service) — the SDK references them, it doesn't load them.

## Background and borders

Chart-level background, border ring and corner radius are part of the [spec's appearance config](/sdk-next/config/appearance), not the theme, because they travel with the chart. The theme governs the token defaults those settings fall back to.

## Related

* [Appearance](/sdk-next/config/appearance) — background, border and corner radius
* [Provider & renderer](/sdk-next/rendering/provider-and-renderer) — where `theme` and `themeOverrides` are set