> ## Documentation Index
> Fetch the complete documentation index at: https://react-native-livechart.brandtnewlabs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theming

> Theme the chart with a color scheme, accent color, palette overrides, and fonts.

<Note>
  **Live example:**
  [`app/demo/theming.tsx`](https://github.com/brandtnewlabs/react-native-livechart/blob/main/app/demo/theming.tsx)
  (colors, gradient, fonts) in the example app.
</Note>

<Frame caption="Light/dark themes and an accent-driven palette">
  <video autoPlay loop muted playsInline controls poster="/media/theming.jpg" src="https://mintcdn.com/brandtnewlabs/3aK_iydbC8Ff9g3s/media/theming.mp4?fit=max&auto=format&n=3aK_iydbC8Ff9g3s&q=85&s=995a17058516757166518296b7e72456" data-path="media/theming.mp4" />
</Frame>

## Theme & accent

The palette is derived from two props: a `theme` (`"light"` or `"dark"`, default `"dark"`) and
an `accentColor` (default `#3323E6`). Setting just these gets you a cohesive look.

```tsx theme={null}
<LiveChart data={data} value={value} theme="light" accentColor="#8b5cf6" />
```

## Palette overrides

For precise control, override individual resolved-palette keys with `palette`. Only the keys you
set are replaced — everything else stays derived from `accentColor` + `theme`.

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  palette={{
    line: "#22c55e",
    candleUp: "#16a34a",
    candleDown: "#dc2626",
    gridLine: "#1f2937",
    tooltipBg: "#0f172a",
  }}
/>
```

Common keys include `line`, `fillTop` / `fillBottom`, `gridLine` / `gridLabel`,
`dotUp` / `dotDown` / `dotFlat`, `candleUp` / `candleDown` / `wickUp` / `wickDown`,
`crosshairLine`, and `tooltipBg` / `tooltipText`. See the [types reference](/api-reference/types)
for the full `LiveChartPalette`.

## Gradient fill

The area under the line is filled with a gradient. By default it's derived from the accent color
(`gradient.topOpacity` / `gradient.bottomOpacity`). For full control, pass explicit `colors` (top →
bottom, at least two stops):

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  gradient={{ colors: ["rgba(51,35,230,0.45)", "rgba(168,85,247,0.25)", "rgba(168,85,247,0)"] }}
/>
```

Omitting `colors` falls back to the accent-derived top/bottom opacity. Custom `colors` are
single-series only — multi-series lines have no area fill. See the [`GradientConfig`
reference](/api-reference/types) for `positions` and the opacity fields.

## Sizing and motion tokens

Where `palette` controls *color*, `metrics` controls *shape* (badge geometry, candle bounds) and
*feel* (fade and lerp speeds) — the same override model, namespaced. Only the keys you set are
replaced; everything else keeps the built-in default.

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  metrics={{
    badge: { padX: 14, tailLength: 8 }, // roomier value pill
    candle: { maxBodyPx: 24 }, // thinner candles
    grid: { fadeInSpeed: 0.3 }, // snappier grid fade-in
    motion: { badgeColorSpeed: 0.2 }, // faster badge color transitions
  }}
/>
```

The five namespaces:

| Namespace    | Controls                                                                                     |
| ------------ | -------------------------------------------------------------------------------------------- |
| `badge`      | Value-pill geometry: `padX`, `padY`, `tailLength`, `marginEdge`, `dotGap`, `tailSpread`.     |
| `candle`     | Candle geometry: `minBodyPx`, `maxBodyPx`, `bodyWidthRatio`.                                 |
| `grid`       | Grid + axis-label fade: `fadeInSpeed`, `fadeOutSpeed`.                                       |
| `motion`     | Lerp speeds: `badgeColorSpeed`, `adaptiveSpeedBoost` (extra catch-up on top of `smoothing`). |
| `emptyState` | No-data layout: `labelOpacity`, `gapPad`, `gapFadeWidth`.                                    |

`metrics` is available on both `LiveChart` and `LiveChartSeries`. See the
[types reference](/api-reference/types) for the full `LiveChartMetrics` shape and every default.

## Fonts

Chart text (axes, badges, tooltips) uses the `font` prop. Point it at a system family, or load a
custom typeface from a Metro asset:

```tsx theme={null}
<LiveChart
  data={data}
  value={value}
  font={{
    fontFamily: "Menlo",
    fontSize: 11,
    typeface: require("./assets/GoogleSansCode-Regular.ttf"),
  }}
/>
```

For multiple weights, register a Skia font manager (`useFonts`) and pass it as `font.fontManager`.

<Note>
  Shaping the live-edge value pill, the grid and axes, or the high / low edge labels has moved to
  its own guide — see [Badge styling](/guides/badge-styling), [Axes & grid](/guides/axes-and-grid),
  and [Extrema labels](/guides/extrema-labels).
</Note>