# 테마와 색

> 밝은·어두운 테마, CSS 변수, 팔레트, 시리즈 색.

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

`theme` 의 기본값 `'auto'` 는 페이지를 따라갑니다. 조상 요소의 `data-theme="dark|light"`, `<html class="dark">`, 그다음 운영체제 설정 순서로 보고, 바뀌면 다시 그립니다. 이 사이트의 오른쪽 위 테마 단추를 눌러 보세요.

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

## 팔레트

기본 팔레트는 색약 사용자도 인접한 색을 구분할 수 있게 검증한 8색입니다(파랑·주황·청록·노랑·분홍·초록·보라·빨강). 9번째 시리즈부터는 같은 색을 반복하지 않고 회색 계열을 씁니다. 같은 색이 다른 뜻으로 두 번 나오지 않게 하기 위해서입니다.

| palette | 설명 |
| --- | --- |
| `'default'` | 파랑부터 시작하는 8색 |
| `'korea'` | 빨강(오름)·파랑(내림)부터. 음수 막대는 파랑 |
| `'mono'` | 첫 색(`colors[0]` 또는 파랑)의 밝기만 바꾼 단색 |

```js
createChart('#chart', {
  type: 'bar',
  title: '상품군별 매출',
  palette: 'mono',
  colors: ['#6250d6'],
  stacked: true,
  data: {
    labels: ['1분기', '2분기', '3분기', '4분기'],
    series: [
      { name: '의류', data: [42, 48, 51, 63] },
      { name: '잡화', data: [28, 31, 30, 38] },
      { name: '식품', data: [18, 22, 25, 24] },
    ],
  },
});
```

## 시리즈 색 정하기

`colors: ['#3182f6', '#eb6834']` 는 시리즈 순서대로 색을 고정합니다. 시리즈 하나만 바꾸려면 그 시리즈에 `color` 를 줍니다. 색은 순위가 아니라 시리즈에 붙으므로, 데이터가 바뀌어도 "매출"은 늘 같은 색입니다.

## CSS 변수로 덮어쓰기

차트나 그 조상 요소에 `--c82-*` 변수를 주면 사이트 색에 맞출 수 있습니다. 색은 SVG 속성에 직접 풀어 쓰므로 PNG·SVG로 내보내도 화면과 같습니다.

```css
/* 밝은 테마 */
.my-dashboard {
  --c82-bg: #fffdf8;
  --c82-ink: #1c1917;
  --c82-grid: #ece7df;
  --c82-s1: #e8590c;      /* 첫 번째 시리즈 */
  --c82-font: 'Pretendard', sans-serif;
}
/* 어두운 테마일 때만 */
.my-dashboard .c82[data-theme='dark'] {
  --c82-bg: #1c1917;
  --c82-ink: #f5f5f4;
  --c82-grid: #2e2a27;
}
```

| 변수 | 쓰이는 곳 |
| --- | --- |
| `--c82-bg` | 배경 (카드, 점 테두리) |
| `--c82-ink` / `--c82-ink-2` / `--c82-muted` | 글자 (제목 / 본문 / 보조) |
| `--c82-grid` / `--c82-axis` | 격자선 / 축선 |
| `--c82-hover` | 마우스가 올라간 칸 바탕 |
| `--c82-good` / `--c82-bad` | 증감 배지 좋음 / 나쁨 |
| `--c82-up` / `--c82-down` | `deltaColors: 'korea'`, `palette: 'korea'` 의 오름 / 내림 |
| `--c82-s1` … `--c82-s8` | 시리즈 색 |
| `--c82-font` | 글꼴 |
| `--c82-border`, `--c82-radius`, `--c82-shadow`, `--c82-tip-bg`, `--c82-tip-border` | 카드 테두리·둥글기·그림자, 툴팁 (CSS 전용) |