# 테마

`watch()`는 컨테이너에 `pa-scene` 클래스를 추가합니다. 이 클래스가 다이어그램의 색 입힌 패널과 색상을 정해 줍니다. 기본값은 `:where()`로 작성되어 있어서, 직접 작성한 스타일시트의 규칙이 우선순위 싸움 없이 항상 이깁니다.

## 변수

컨테이너(또는 상위 요소)에 다음 변수를 지정합니다.

| 변수 | 제어하는 대상 | 기본값(라이트) |
|---|---|---|
| `--pa-bg` | 패널 배경 | `#efeafa` |
| `--pa-solid` | 진한 색: 선, 아이콘 선, 강조 | `#4F378B` |
| `--pa-light` | 연한 채우기: 아이콘 채우기, 그룹 배경 | `#e4dcf6` |
| `--pa-stroke` | Tabler 아이콘의 선 두께 | `1.5` |
| `--pele-*` | Pele 자체 변수(`--pele-fg`, `--pele-surface` 등) | `--pa-*` 값에서 설정됨 |

```css
.pa-scene {
  --pa-bg: #f6f6f0;
  --pa-solid: #0b5fff;
  --pa-light: #dbe7ff;
  --pa-stroke: 1.25;
}
```

`--pele-*` 변수의 전체 목록은 Pele의 [테마 문서](https://pele.run)를 참고하시기 바랍니다.

## 다크 모드

시스템이 다크 모드를 선호하면 다크 색상이 적용되며, 페이지가 루트 요소에 `data-theme="light"`를 지정한 경우는 제외됩니다. 다크를 강제하려면 루트 요소에 `data-theme="dark"`를 지정합니다. 두 모드가 같은 변수를 사용하므로 `--pa-solid` 같은 변수를 덮어쓰면 어느 모드에서든 적용됩니다.

## 모션 줄이기

`prefers-reduced-motion: reduce`가 설정되어 있으면 인트로와 토큰이 재생되지 않고 완성된 그림이 표시됩니다.

## 장면 프레임

패널과 안쪽 여백, 둥근 모서리는 `.pa-scene`에서 적용됩니다. `border-radius`, `padding`, `margin`은 이 클래스에서 직접 덮어쓰시면 됩니다.