다크 모드 토큰의 작동 방식
다크 모드 토큰은 라이트 테마와 같은 시맨틱 이름에 연결된 두 번째 값 묶음입니다. 모드를 바꾸면 --color-surface 같은 이름이 다른 색을 가리키게 되며, 어떤 모드가 활성인지 컴포넌트가 알 필요는 없습니다.
반전이 통하지 않는 이유
직관적인 방식, 즉 명도를 뒤집고 검정과 흰색을 맞바꾸는 방식은 처음에는 뭐라 짚기 어려운 방식으로 어색한 다크 테마를 만듭니다.
구체적인 이유 몇 가지입니다.
순수한 검정은 눈에 거칩니다. 잘 만든 다크 테마 대부분은 #000000 대신 아주 어두운 회색을, 종종 미세한 색조를 띤 회색을 씁니다. 순수한 검정 위의 최대 대비 흰 글자는 헐레이션을 일으켜 글자가 번져 보입니다.
채도가 높은 색은 어두운 배경에서 더 밝게 읽힙니다. 흰 배경에서 편안하게 앉는 파랑이 어두운 배경에서는 진동하듯 보일 수 있습니다. 다크 모드용 변형은 보통 밝게 하는 데 그치지 않고 채도도 낮춥니다.
높이감이 뒤집힙니다. 라이트 테마에서는 떠 있는 면이 그림자를 드리웁니다. 다크 테마에서는 그림자가 거의 보이지 않아, 떠 있는 면은 오히려 더 밝아지는 것으로 표시됩니다. 한쪽 모드에서 작동하는 그림자 토큰은 다른 쪽에서 아무 정보도 전달하지 못합니다.
대비율은 뒤집기를 견디지 못합니다. 라이트에서 AA를 통과하는 조합이 다크에서는 떨어질 수 있습니다. 모든 조합은 다시 계산이 아니라 다시 확인이 필요합니다.
성립시키는 구조
다크 모드는 색의 문제이기 전에 이름 짓기의 문제입니다. 시맨틱 층이 이미 있을 때에만 깔끔하게 풀립니다.
:root {
--color-surface: var(--grey-50);
--color-text-primary: var(--grey-900);
}
[data-theme="dark"] {
--color-surface: var(--grey-900);
--color-text-primary: var(--grey-50);
}컴포넌트는 --color-surface를 참조합니다. 모드가 있다는 사실을 알게 되는 일이 없습니다. 나중에 세 번째 테마를 더하는 것도 같은 모양의 블록을 하나 더하는 일이지, 모든 컴포넌트를 고치는 일이 아닙니다.
컴포넌트가 프리미티브를 직접 참조하면 다시 가리킬 대상이 없고, 다크 모드는 모든 파일의 조건문이 됩니다.
둘을 함께 만드세요
여섯 달 뒤에 얹는 다크 테마는 모든 컴포넌트를 훑는 일입니다. 라이트 테마와 함께, 같은 스케일에서 만들면 공짜입니다.
이것이 한쪽만 출시할 예정이라도 처음에 모드를 정해 두어야 하는 가장 강력한 이유입니다. 구조적 비용은 이름 짓기에 있고, 이름 짓기는 컴포넌트가 생기기 전에는 싸고 생긴 뒤에는 비쌉니다.
Flash DS와의 관계
생성되는 모든 체계는 라이트와 다크를 함께 만들고 같은 시맨틱 이름에 묶으며, 한쪽에서 다른 쪽을 나중에 유도하는 대신 조합마다 대비를 확인합니다.