# Themes

Charts inherit app-level theme settings from `ChartKitProvider`, while each chart can still override `theme` or `preset` locally.

```tsx
import { ChartKitProvider, createChartPreset } from "react-native-chart-kit/v2";


const acme = createChartPreset({
  light: {
    background: "#ffffff",
    grid: "#e5edf7",
    series: ["#155eef", "#12b76a"]
  },
  dark: {
    background: "#07111f",
    plotBackground: "#0b1627",
    grid: "#1d3554",
    series: ["#60a5fa", "#34d399"]
  }
});


const data = [
  { date: "Jan", revenue: 52 },
  { date: "Feb", revenue: 86 },
  { date: "Mar", revenue: 58 },
  { date: "Apr", revenue: 134 },
  { date: "May", revenue: 95 },
  { date: "Jun", revenue: 176 }
];


<ChartKitProvider mode="system" preset="acme" presets={{ acme }}>
  <LineChart data={data} xKey="date" yKey="revenue" width={410} height={240} />
</ChartKitProvider>;
```

## Built-In Presets

These names follow the same broad convention used by mature color systems: abstract palette families from [Radix Colors](https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette), utility color families from [Tailwind CSS](https://tailwindcss.com/docs/colors), and role-based color thinking from [Material Design](https://m3.material.io/styles/color/roles).

| Preset | Character | Light series | Dark series |
| --- | --- | --- | --- |
| `default` | Balanced blue/cyan baseline for neutral product UI. |  |  |
| `spectrum` | Clear blue, green, amber, and violet for high-readability multi-series charts. |  |  |
| `aurora` | Cool sky, violet, teal, and orange with a polished app feel. |  |  |
| `verdant` | Fresh green-led palette with rose, sky, and lime accents. |  |  |
| `cupertino` | Crisp system-style blue, green, orange, and pink. |  |  |
| `material` | Material-inspired purple primary with teal, error red, and mauve. |  |  |
| `graphite` | Monochrome grayscale for quiet, editorial, or brand-led surfaces. |  |  |
| `contrast` | Accessibility-forward high contrast with stronger axis and grid colors. |  |  |
| `midnight` | Deep slate base with cyan, green, amber, and pink neon accents. |  |  |

Alpha note: earlier use-case names were removed. Use the palette names above in new code.

Use `theme` for one-off chart overrides and `createChartPreset()` for design-system presets that should be shared across a product.

## Props

### ChartKitProvider

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `ReactNode` | Chart subtree that should inherit provider defaults. |
| `mode` | `ChartKitThemeMode` | Theme mode to apply, including `"light"`, `"dark"`, or `"system"`. |
| `preset` | `CartesianChartPresetValue` | Default preset name or preset object used by descendant charts. |
| `presets` | `CartesianChartPresetRegistry` | Custom preset registry available to descendant charts. |
| `renderer` | `LineChartRenderer` | Default SVG-compatible renderer used by descendant chart surfaces. |
| `theme` | `CartesianChartTheme` | Inline theme overrides merged into descendant chart themes. |

[Edit page](https://github.com/chart-kit/react-native-chart-kit/edit/main/docs/charts/themes.md)

[Previous  
Pricing and plans](https://chartkit.io/docs/react-native/charts/pricing/)[Next  
Accessibility](https://chartkit.io/docs/react-native/charts/accessibility/)