시작하기
테마
기본은 사용자 기기의 라이트/다크 설정을 따라가요.
색과 글꼴은 내 서비스에 맞게 바꿀 수 있어요.
라이트 · 다크
<FnChart colorScheme="system" … /> // 기본: OS 설정을 따르고, 바뀌면 바로 전환
<FnChart colorScheme="dark" … /> // 항상 다크상승 · 하락 색
기본은 한국식(상승 빨강, 하락 파랑)이에요.
해외 서비스라면 바꿔주세요.
<FnChart theme={{ up: '#12B886', down: '#F04452' }} … />트레이딩 차트 색 토큰
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
background / surface | string | — | 배경, 패널 배경. |
text / textSecondary | string | — | 글자, 보조 글자. |
grid / border / crosshair | string | — | 격자, 경계선, 십자선. |
up / down | string | — | 상승, 하락. |
accent | string | — | 선택·강조 색. |
fontFamily / fontSize / radius | string / number / number | — | 글꼴, 글자 크기, 모서리. |
값에 CSS 변수를 써도 돼요.theme={{ background: 'var(--bg)' }}처럼 쓰면 페이지 테마가 바뀔 때 차트도 따라 바뀌어요.
차트 컴포넌트 색
SVG 차트 컴포넌트는 페이지의 color-scheme을 따르고, 아래 CSS 변수로 바꿀 수 있어요.
:root {
--fnv-text: #191f28; /* 진한 글자 */
--fnv-text-muted: #8b95a1; /* 축 라벨 */
--fnv-grid: #f2f4f6; /* 격자 */
--fnv-bg: #ffffff; /* 말풍선·점 테두리 */
--fnv-accent: #6c4dff; /* 기간 탭 선택 */
}