Theming Terms

이 문서가 답하는 질문: 다크모드·멀티 브랜드·RTL을 다룰 때 등장하는 어휘가 정확히 무엇을 가리키는가? 한 줄 답 (Pyramid Top): 이 카테고리는 “같은 컴포넌트가 컨텍스트에 따라 다른 값을 갖게 만드는” 어휘 — data-theme·prefers-* 미디어 쿼리·logical property가 핵심.

카테고리 개요

키워드	한 줄 정의
Dark Mode	어두운 배경 테마
data-theme	DOM 속성으로 테마 전환
color-scheme	폼·스크롤바의 light/dark 자동 적응
Multi-brand	한 코드베이스로 여러 브랜드
RTL	오른쪽→왼쪽 텍스트 방향

본문 (알파벳 순)

Brand (브랜드)

카테고리: Theming 별칭: brand theme

한 디자인 시스템이 여러 브랜드를 지원할 때, 각 브랜드의 색·로고·타이포 묶음. semantic 토큰의 상위 layer로 표현.

color-scheme (CSS property)

카테고리: Theming 별칭: meta color-scheme

color-scheme: light dark; — 폼 컨트롤·스크롤바·기본 배경의 light/dark 자동 적응 신호. <meta name="color-scheme">도 동일 효과.

Dark Mode

카테고리: Theming 별칭: dark theme

어두운 배경의 테마. 단순 색 반전이 아니라 그림자·대비·일러스트 톤을 함께 재조정해야 한다. semantic 토큰의 대표적 사용처.

관련: color-scheme, data-theme, light-dark() 참고: 06-theming

data-theme

카테고리: Theming 별칭: theme data attribute

<html data-theme="dark">. CSS는 [data-theme="dark"] { ... }로 분기. JS가 자유롭게 토글 가능 — 시스템 설정과 사용자 선택을 모두 반영하는 표준 방법.

forced-colors

카테고리: Theming 별칭: Windows High Contrast Mode, WHCM

OS의 강제 색상 모드(주로 Windows 고대비). @media (forced-colors: active). 모든 색이 시스템 색으로 강제 치환되므로 border·outline에만 의존하는 디자인이 안전.

FOUC (Flash of Unstyled Content)

카테고리: Theming 별칭: theme flash, FOIT (typography 한정)

다크모드 토글 시 흰 배경이 잠깐 깜빡이는 현상. SSR + localStorage 동기화 스크립트로 해결. Next.js의 next-themes 라이브러리가 표준 해법.

관련: Dark Mode, data-theme 참고: 06-theming

Logical Property

카테고리: Theming 별칭: CSS logical properties

물리적 방향(left/right)이 아닌 흐름 방향(inline-start/end)을 쓰는 CSS 속성. margin-inline-start, padding-block-end. RTL 지원의 전제.

관련: RTL, writing-mode 참고: 06-theming

Multi-brand Theming

카테고리: Theming 별칭: multi-tenant theming, white-label

한 코드베이스에서 여러 브랜드를 지원. brand 토큰을 layer로 쌓고(base + brand-a vs base + brand-b), CSS variables로 런타임 전환.

prefers-color-scheme

카테고리: Theming 별칭: dark mode media query

OS 설정(라이트/다크) 감지. @media (prefers-color-scheme: dark). 사용자가 OS에서 다크모드를 켰는지 알 수 있는 표준.

관련: color-scheme, Dark Mode, data-theme 참고: 06-theming

prefers-contrast

카테고리: Theming 별칭: contrast preference

대비 선호 — no-preference / more / less. WCAG AAA 대비를 사용자 선택으로 조건부 적용.

prefers-reduced-motion

카테고리: Theming 별칭: motion preference

전정기관 민감 사용자를 위한 모션 축소 선호. @media (prefers-reduced-motion: reduce). transition·animation을 0.01s로 단축하는 것이 표준 대응.

prefers-reduced-transparency

카테고리: Theming 별칭: transparency preference

투명·블러 축소 선호. iOS·macOS의 “Reduce Transparency” 설정과 연동. backdrop-filter 등을 비활성화.

RTL (Right-to-Left)

카테고리: Theming 별칭: right-to-left writing, bidi

아랍어·히브리어처럼 오른쪽→왼쪽으로 흐르는 텍스트. <html dir="rtl">. logical property 없이는 디자인 시스템이 깨진다.

관련: Logical Property, writing-mode 참고: 06-theming

System Color

카테고리: Theming 별칭: CSS system colors, semantic system color

OS가 제공하는 의미 기반 색. Canvas, CanvasText, LinkText, ButtonFace. forced-colors 모드에서 자동 치환 대상.

writing-mode

카테고리: Theming 별칭: text orientation

텍스트 흐름 방향 — horizontal-tb (가로), vertical-rl (세로, 일본·중국 전통). logical property와 결합해 방향 무관 디자인을 만든다.

요약 + Mermaid

이 카테고리는 컨텍스트에 따른 값 전환의 어휘다. 핵심 두 축 — 시스템 신호 (prefers-*) 와 사용자 선택 (data-theme) — 의 우선순위 결정이 거의 모든 테마 구현의 핵심 결정점.

Component Terms Tooling Terms