# 테마와 색

> 밝은·어두운 테마, 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 전용) |

## KRDS 테마 (theme: 'krds')

[KRDS(범정부 UI/UX 디자인 시스템)](https://www.krds.go.kr/)에는 차트 컴포넌트가 없어서, KRDS 를 쓰는 공공 사이트는 차트 색을 따로 맞춰야 했습니다. `theme: 'krds'` 는 KRDS 공식 토큰 파일([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), 증감은 point-50(빨강 오름)·primary-50(파랑 내림), 좋음·나쁨은 success-50 · danger-50, 글꼴은 Pretendard GOV 를 씁니다. 밝기는 `'auto'` 처럼 페이지를 따라가고, 어두운 쪽은 KRDS 선명한 화면 모드(gray-95 바탕, gray-5 글자)를 따릅니다.

```js
createChart('#chart', {
  type: 'bar',
  theme: 'krds',
  title: '분기별 민원 접수',
  unit: '건',
  data: {
    labels: ['1분기', '2분기', '3분기', '4분기'],
    series: [
      { name: '온라인', data: [4210, 4580, 4390, 5120] },
      { name: '방문', data: [1830, 1710, 1650, 1590] },
      { name: '전화', data: [2240, 2310, 2150, 2080] },
    ],
  },
});
```

| 순서 | 색 | KRDS 토큰 |
| --- | --- | --- |
| 1 | `#256ef4` | primary-50 |
| 2 | `#c78500` | warning-40 |
| 3 | `#bd2c0f` | danger-60 |
| 4 | `#3fa654` | success-40 |
| 5 | `#0b78cb` | information-50 |
| 6 | `#d63d4a` | point-50 |

시리즈 색은 KRDS 원색 중에서 고른 6색이며, 밝은·어두운 화면에서 같은 값을 씁니다. dataviz 팔레트 검사기(OKLCH 밝기 대역, 채도 하한, 적록 색약 시뮬레이션 인접 ΔE, 정상 시각 ΔE, 바탕 대비 3:1)로 #ffffff 와 #131416 바탕 모두 통과했습니다(인접 색약 ΔE 최소 11.5, 정상 시각 18.9). KRDS 에는 보라·청록 계열이 없어 7번째 시리즈부터는 회색이 되고, 파랑이 두 번(1·5번) 나오므로 시리즈가 5개를 넘으면 `patterns: true` 로 무늬를 함께 쓰세요.

## shadcn/ui · Tailwind 에 맞추기

shadcn/ui 의 CSS 변수를 `--c82-*` 에 이어 주면 카드·글자·격자가 사이트와 같아지고, `<html class="dark">` 로 바뀌면 차트도 다시 그립니다. Tailwind v4(oklch 값)와 v3(HSL 숫자 세 개) 모두 됩니다. 색 계산(그라디언트·대비)을 위해 82chart 는 `hsl()` · `oklch()` 값도 읽습니다.

```css
/* Tailwind v4 · shadcn/ui (토큰이 oklch(...) 값) */
.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 · 예전 shadcn/ui (토큰이 "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));
}
```

shadcn 의 `--chart-1` … `--chart-5` 도 이을 수 있지만(`--c82-s1: var(--chart-1)` …), 기본값은 같은 검사기에서 통과하지 못합니다. 밝은 테마는 4·5번(노랑·주황)이 인접 ΔE 5.6(색약)·7.4(정상)로 거의 같고 흰 바탕 대비가 1.7:1·2.1:1, 3번은 채도가 낮아 회색으로 읽힙니다. 시리즈 색은 82chart 기본 팔레트를 그대로 두고 바탕·글자만 잇는 것을 권합니다. 꼭 이어야 한다면 `patterns: true` 와 데이터 라벨을 함께 쓰세요.