# Theme and colors

> Light and dark, CSS variables, palettes and series colors.

Source: https://82chart.com/en/docs/theme-colors/

The default `theme: 'auto'` follows the page: an ancestor's `data-theme="dark|light"`, then `<html class="dark">`, then the OS setting, and redraws when they change. Try the theme button at the top of this site.

```js
chart.setTheme('dark');   // 'light' | 'dark' | 'auto'
```

## Palettes

The default palette has eight colors checked so that neighbours stay distinct for color-blind readers (blue, orange, teal, yellow, pink, green, purple, red). From the ninth series on it uses grays instead of repeating a hue, so one color never means two things.

| palette | What it is |
| --- | --- |
| `'default'` | Eight colors starting with blue |
| `'korea'` | Starts with red (up) and blue (down); negative bars are blue |
| `'mono'` | Shades of the first color (`colors[0]` or blue) |

```js
createChart('#chart', {
  type: 'bar',
  title: 'Sales by category',
  palette: 'mono',
  colors: ['#6250d6'],
  stacked: true,
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      { name: 'Clothing', data: [42, 48, 51, 63] },
      { name: 'Accessories', data: [28, 31, 30, 38] },
      { name: 'Food', data: [18, 22, 25, 24] },
    ],
  },
});
```

## Series colors

`colors: ['#3182f6', '#eb6834']` pins colors in series order; a series' own `color` changes just that one. Colors belong to series, not ranks, so "Sales" keeps its color when the data changes.

## CSS variables

Set `--c82-*` variables on the chart or any ancestor to match your site. Colors are resolved into the SVG attributes, so exported PNG and SVG files look the same as the screen.

```css
/* light theme */
.my-dashboard {
  --c82-bg: #fffdf8;
  --c82-ink: #1c1917;
  --c82-grid: #ece7df;
  --c82-s1: #e8590c;      /* first series */
  --c82-font: 'Inter', sans-serif;
}
/* only in the dark theme */
.my-dashboard .c82[data-theme='dark'] {
  --c82-bg: #1c1917;
  --c82-ink: #f5f5f4;
  --c82-grid: #2e2a27;
}
```

| Variable | Used for |
| --- | --- |
| `--c82-bg` | Background (card, point outlines) |
| `--c82-ink` / `--c82-ink-2` / `--c82-muted` | Text (titles / body / secondary) |
| `--c82-grid` / `--c82-axis` | Grid lines / axis line |
| `--c82-hover` | Hovered band |
| `--c82-good` / `--c82-bad` | Change badge good / bad |
| `--c82-up` / `--c82-down` | Up / down for `deltaColors: 'korea'` and `palette: 'korea'` |
| `--c82-s1` … `--c82-s8` | Series colors |
| `--c82-font` | Font |
| `--c82-border`, `--c82-radius`, `--c82-shadow`, `--c82-tip-bg`, `--c82-tip-border` | Card border, radius and shadow, tooltip (CSS only) |

## KRDS theme (theme: 'krds')

[KRDS](https://www.krds.go.kr/), the Korean government's UI/UX design system, has no chart component, so public sites built on it had to match chart colors by hand. `theme: 'krds'` takes surfaces, text and grid from the official token file ([krds-uiux · krds_tokens.css](https://github.com/KRDS-uiux/krds-uiux/blob/main/resources/css/token/krds_tokens.css): gray-0, gray-90, gray-70, gray-50, gray-10), up/down from point-50 (red up) and primary-50 (blue down), good/bad from success-50 and danger-50, and the Pretendard GOV font. Light or dark follows the page like `'auto'`; dark follows KRDS's high-contrast mode (gray-95 surface, gray-5 text).

```js
createChart('#chart', {
  type: 'bar',
  theme: 'krds',
  title: 'Requests by quarter',
  language: 'en',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [
      { name: 'Online', data: [4210, 4580, 4390, 5120] },
      { name: 'In person', data: [1830, 1710, 1650, 1590] },
      { name: 'Phone', data: [2240, 2310, 2150, 2080] },
    ],
  },
});
```

| Order | Color | KRDS token |
| --- | --- | --- |
| 1 | `#256ef4` | primary-50 |
| 2 | `#c78500` | warning-40 |
| 3 | `#bd2c0f` | danger-60 |
| 4 | `#3fa654` | success-40 |
| 5 | `#0b78cb` | information-50 |
| 6 | `#d63d4a` | point-50 |

The six series colors come from the KRDS primitives, the same in light and dark. They pass the dataviz palette checks (OKLCH lightness band, chroma floor, simulated red-green color-blind ΔE between neighbours, normal-vision ΔE, 3:1 against the surface) on both #ffffff and #131416 (worst neighbour ΔE 11.5 color-blind, 18.9 normal). KRDS has no purple or teal family, so series 7 and later are gray, and blue appears twice (1 and 5): with more than five series add `patterns: true`.

## Matching shadcn/ui and Tailwind

Point the `--c82-*` variables at shadcn/ui's and the card, text and grid match the site; toggling `<html class="dark">` redraws the chart. Tailwind v4 (oklch values) and v3 (bare HSL numbers) both work; 82chart reads `hsl()` and `oklch()` for its color math (gradients, contrast).

```css
/* Tailwind v4 · shadcn/ui (tokens are oklch(...) values) */
.c82 {
  --c82-bg: var(--card);
  --c82-ink: var(--card-foreground);
  --c82-ink-2: var(--card-foreground);
  --c82-muted: var(--muted-foreground);
  --c82-grid: var(--border);
  --c82-axis: var(--border);
  --c82-border: var(--border);
  --c82-radius: var(--radius);
  --c82-tip-bg: var(--popover);
  --c82-tip-border: var(--border);
  --c82-accent: var(--ring);
  --c82-font: var(--font-sans);
}

/* Tailwind v3 · older shadcn/ui (tokens like "222 47% 11%") */
.c82 {
  --c82-bg: hsl(var(--card));
  --c82-ink: hsl(var(--card-foreground));
  --c82-muted: hsl(var(--muted-foreground));
  --c82-grid: hsl(var(--border));
  --c82-tip-bg: hsl(var(--popover));
}
```

You can map shadcn's `--chart-1` … `--chart-5` too (`--c82-s1: var(--chart-1)` …), but the defaults fail the same checks: in the light theme 4 and 5 (yellow, orange) are nearly the same (neighbour ΔE 5.6 color-blind, 7.4 normal) at 1.7:1 and 2.1:1 on white, and 3 is so low in chroma it reads as gray. We suggest keeping 82chart's series palette and mapping only surfaces and text; if you must map them, add `patterns: true` and data labels.