테마
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-* 값에서 설정됨 |
.pa-scene {
--pa-bg: #f6f6f0;
--pa-solid: #0b5fff;
--pa-light: #dbe7ff;
--pa-stroke: 1.25;
}--pele-* 변수의 전체 목록은 Pele의 테마 문서를 참고하시기 바랍니다.
다크 모드
시스템이 다크 모드를 선호하면 다크 색상이 적용되며, 페이지가 루트 요소에 data-theme="light"를 지정한 경우는 제외됩니다. 다크를 강제하려면 루트 요소에 data-theme="dark"를 지정합니다. 두 모드가 같은 변수를 사용하므로 --pa-solid 같은 변수를 덮어쓰면 어느 모드에서든 적용됩니다.
모션 줄이기
prefers-reduced-motion: reduce가 설정되어 있으면 인트로와 토큰이 재생되지 않고 완성된 그림이 표시됩니다.
장면 프레임
패널과 안쪽 여백, 둥근 모서리는 .pa-scene에서 적용됩니다. border-radius, padding, margin은 이 클래스에서 직접 덮어쓰시면 됩니다.