# 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) |