Native
useScheme
RN 에 CSS 변수가 없어서 생긴 훅.
bgBase
#ffffff
surfaceRaised
#ffffff
lineDivider
#e6e6e6
textPrimary
#111111
textSecondary
#6b6b6b
actionPrimary
#2457ff
import { useScheme } from '@coldsurfers/surf-ui/native/scheme'import { Text } from '@coldsurfers/surf-ui/native/Text'import { nativeRadius, nativeSpacing } from '@coldsurfers/surf-ui/tokens/native'import { View } from 'react-native'/** 색을 훅에서 받아 스타일에 직접 넣는다 — RN 엔 CSS 변수가 없다. */const SLOTS = [ 'bgBase', 'surfaceRaised', 'lineDivider', 'textPrimary', 'textSecondary', 'actionPrimary',] as constexport default function Example() { const scheme = useScheme() return ( <View style={{ gap: nativeSpacing[2], padding: nativeSpacing[5] }}> {SLOTS.map((slot) => ( <View key={slot} style={{ flexDirection: 'row', alignItems: 'center', gap: nativeSpacing[3] }} > <View style={{ width: 32, height: 32, borderRadius: nativeRadius.sm, borderWidth: 1, borderColor: scheme.lineDivider, backgroundColor: scheme[slot], }} /> <Text textStyle="bodySm">{slot}</Text> <Text textStyle="labelSm" tone="subtle"> {scheme[slot]} </Text> </View> ))} </View> )}색 객체를 돌려줍니다. 스타일에 직접 넣으면 됩니다.
왜 훅인가
웹에서는 var(--surf-surface-raised) 한 줄이면 끝납니다 — 값이 어디서 오는지 컴포넌트가 몰라도 됩니다.
RN 에는 그 간접층이 없어서, 누군가는 색을 읽어다 넘겨야 합니다. 그 자리가 이 훅입니다.
스킴이 하나뿐인데 왜 훅 모양인가
지금 useScheme() 은 상수 하나를 돌려줍니다. ink(dark) 스킴을 폐기하면서 뒤집을 축이
사라졌기 때문입니다.
그래도 훅 모양을 남겨 둔 건 호출부가 이미 이 경계를 쓰고 있어서입니다. 스킴이 다시 생기면
이 파일 한 곳만 되돌리면 됩니다. 소비처가 nativeColor.light 를 직접 읽고 있었다면
그때 전부를 고쳐야 합니다.
그래서 색을 nativeColor.light 에서 직접 읽지 마세요. 지금은 같은 값이지만, 그 순간
되돌릴 자리가 한 곳에서 여러 곳으로 늘어납니다.
슬롯
표면 · 텍스트 · 상태 색이 한 객체에 있습니다. 전체 값은 Foundations › Colors 가 정본입니다 — 웹과 같은 팔레트입니다.
Text 의 tone 축에 없는 색(statusDanger 등)이 필요하면 여기서 읽어 style 로 넣습니다.
<Text textStyle="labelSm" style={{ color: scheme.statusDanger }}>
@ 가 없습니다.
</Text>