인터페이스 테마 토
1) 원칙
1. 시스템> 피부. 테마는 배경 반전뿐만 아니라 토큰 세트 (색상, 배경, 대비, 그림자, 상태, 삽화, 그래프) 입니다.
2. 시스템 우선. 기본적으로-Light/Dark/High-Contrast를 수동으로 선택할 수있는 시스템 ('선호하는 색상 구성 요소').
3. 기본 대비. 작은 텍스트/중요한 레이블에 대한 대상-WCAG AA-AAA.
4. 발병이 없습니다. 렌더링 (인라인 스크립트) 전에 테마를 적용하고 신중하게 전환합니다.
5. 브랜드 안정성. 상태의 악센트와 의미는 모든 주제에서 보존됩니다.
2) 모드 및 시나리오
가벼운 스크립트/지불 양식/긴 읽기.
어두운-저녁/낮은 조명/라이브 경기; 눈부심을 줄입니다.
시스템-OS/브라우저를 따릅니다 ('선호하는 색상 체계').
대비-대비 증가 및 최소화 된 보석 (동작 감소).
계절/프로모션 (선택 사항) -토너먼트/이벤트의 기본 주제 (토큰을 깨뜨리지 않음).
3) 토큰 아키텍처
직접 색상이 아닌 시맨틱 토큰을 저장합니다
css
:root {
/ semantics/
--bg: hsl(0 0% 99%);
--bg-elev: hsl(0 0% 100%);
--fg: hsl(220 15% 15%);
--muted: hsl(220 10% 45%);
--accent: hsl (260 95% 60%) ;/brand accent/
--success: hsl(152 55% 40%);
--warning: hsl(36 85% 45%);
--danger: hsl(0 75% 50%);
--border: hsl(220 10% 90%);
--focus: hsl(260 95% 60% /.6);
--shadow: 0 6px 24px hsl(220 20% 10% /.08);
/ typography/radii/
--radius: 12px;
--lh: 1. 4;
}
:root[data-theme="dark"]{
--bg: hsl(220 18% 10%);
--bg-elev: hsl(220 18% 14%);
--fg: hsl(0 0% 96%);
--muted: hsl(220 10% 70%);
--accent: hsl (260 95% 65%) ;/slightly lighter in the dark/
--border: hsl(220 14% 22%);
--shadow: 0 8px 28px hsl(220 50% 2% /.6);
}
:root[data-theme="hc"]{
/ high-contrast: simple pairs, high Lc/
--bg: #000; --bg-elev:#000; --fg:#fff; --muted:#fff;
--accent:#00E; --success:#0F0; --warning:#FF0; --danger:#F00;
--border:#fff; --focus:#0FF;
}규칙: 구성 요소는 시맨틱 토큰 만 사용합니다.
4) 검출기 및 선택 저장
html
<script>
(function(){
const saved = localStorage. getItem('theme'); // 'light' 'dark' 'hc' 'system' null const sys = window. matchMedia('(prefers-color-scheme: dark)'). matches? 'dark': 'light';
const theme = saved && saved!=='system'? saved: sys;
document. documentElement. setAttribute('data-theme', theme);
})();
</script>UI 스위치: 'Light/Dark/System/High-Contrast'. '시스템' 을 선택하면 특정 색상을 저장하지 말고 플래그 만 저장하십시오. OS 변경 사항을 듣습니다
js matchMedia('(prefers-color-scheme: dark)'). addEventListener('change', e=>{
if(localStorage. getItem('theme')==='system'){
document. documentElement. setAttribute('data-theme', e. matches? 'dark': 'light');
}
});5) FOUC가없는 부드러운 전환
CSS (인라인 스크립트) 를 불러오기 전에 테마를 적용하십시오.
테마 애니메이션은 짧고 '컬러/배경/테두리 색상' (120-200 ms) 이지만 첫 번째 렌더링에는 없습니다
css
@media (prefers-reduced-motion: no-preference){
html. theme-ready { transition: color. 18s, background-color. 18s, border-color. 18s; }
}응용 프로그램을 마운트 한 후 'class =' teme-ready '를 추가하십시오.
6) 구성 요소 및 상태
텍스트/아이콘: 대비 AA; 보조 텍스트가 4 이하입니다. 5:1 (어둠 속에서 쉽게 사라짐).
필드/카드: 배경 '-bg-elev', 테두리 '-테두리', 그림자 '-그림자'.
CTA: 배경 '-악센트', 대비 텍스트 ('# fff' 또는 계산).
상태 (호버/포커스/액티브/비활성화): "무지개를 비추지 않고" 밝기/알파를 변경하십시오.
그래픽/스파크 라인: 밝은/어두운 곳을위한 별도의 팔레트; 그리드/축은 대비가 낮지 만 읽을 수 있습니다.
7) 이미지/미디어/로고
단색 아이콘-' currentColor '를 통해 (텍스트에 적응).
브랜드 로고를 뒤집지 마십시오. 두 가지 버전 (밝은/어두운) 을 준비하십시오.
포스터/스크린 샷: 텍스트 가독성을 위해 어두운 곳에서 쉽게 오버레이 할 수 있습니다 (8-12%).
SVG: "하드" 채우기를 피하고 var 'var (-fg) '/' var (-- 악센트)' 를 사용하십시오.
8) 경제성
대비: 별도의 사전 설정된 'data-teme = "hc"'.
포커스 링: 항상 보이는 ('개요: 2px solid var (-- focus); 개요 오프셋: 2px ').
색상에 의존하지 마십시오. 상태에 대한 아이콘/텍스트/패턴.
글꼴: '글꼴 변형 숫자: 표 숫자;' 합계/요인에 대해.
RTL: 테마가 미러링을 깨뜨리지 않습니다 (논리적 속성을 사용합니다).
9) 성능
색상-루트의 CSS 사용자 정의 속성은 구성 요소 이름을 바꾸지 않고 즉시 재사용합니다.
대형 컨테이너에서 'invert ()' 필터로 이미지를 "다시 칠하기" 피하십시오.
테마에 대한 무거운 삽화의 게으른 대체 (필요한 경우).
JS에 큰 팔레트를 저장하지 마십시오. 테마는 클래스/속성에 의해 제어됩니다.
10) iGaming의 세부 사항
밤의 라이브 요인: "부드러운" 대비 (숫자의 경우 AAA), 요소의 변화를 강조하는 것은 깜박임없이 눈에 띄지 않습니다.
책임있는 플레이: 알림과 프롬프트는 두 테마 모두에서 읽을 수 있습니다. 밤에는 "유독 한" 꽃이 없습니다.
박스 오피스: 빛나는 악센트를 피곤하게하지 않는 필드/서명/오류; 성공/오류는 주제에서 안정적입니다.
토너먼트 "스킨": 피상적 인 악센트 재정의만으로 기본 토큰을 깨뜨리지 마십시오.
11) 스니펫 UI
스위치 (HTM/JS):html
<label class="theme-switch">
<span> Topic </span>
<select id="theme">
<option value = "system "> System </option>
<option value = "light "> Bright </option>
<option value = "dark "> Dark </option>
<option value = "hc"> High contrast </option>
</select>
</label>
<script>
const sel = document. getElementById('theme');
sel. value = localStorage. getItem('theme') 'system';
sel. addEventListener('change', e=>{
const v = e. target. value;
localStorage. setItem('theme', v);
if(v==='system'){
const sys = matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light';
document. documentElement. setAttribute('data-theme', sys);
} else {
document. documentElement. setAttribute('data-theme', v);
}
});
</script>css
.btn{height:44px; padding:0 16px; border-radius:var(--radius); display:inline-flex; align-items:center; gap:8px}
.btn--primary{background:var(--accent); color:#fff}
.card{background:var(--bg-elev); border:1px solid var(--border); box-shadow:var(--shadow); border-radius:var(--radius)}
.text-muted{color:var(--muted)}tsx import { useEffect, useState } from 'react';
type Theme = 'light' 'dark' 'hc' 'system';
export function useTheme(){
const [theme, setTheme] = useState<Theme>(()=>localStorage. getItem('theme') as Theme 'system');
useEffect(()=>{
const apply = (t:Theme)=>{
const v = t==='system'? (matchMedia('(prefers-color-scheme: dark)'). matches? 'dark':'light'): t;
document. documentElement. setAttribute('data-theme', v);
};
apply(theme);
const mql = matchMedia('(prefers-color-scheme: dark)');
const on = ()=> theme==='system' && apply('system');
mql. addEventListener('change', on);
return ()=> mql. removeEventListener('change', on);
},[theme]);
useEffect(()=> localStorage. setItem('theme', theme),[theme]);
return { theme, setTheme };
}12) 메트릭
테마 채택률: Dark/System/HC에서 사용자 비율.
FOUC 속도: 시작시 가시적 인 "백색 버스트" 비율 (<1%).
대비 결함: 릴리스 별 대비 버그 수.
오류 가시성: 다른 주제에서 "보이지 않는" 오류로 인한 클릭/반복.
에너지 영향 (모바일): 암흑에서의 세션 시간 비교 (간접 메트릭).
13) 반 패턴
모든 '필터: 반전 (1)' 을 바꾸면 브랜드와 의미가 깨집니다.
토큰없이 구성 요소에서 색상을 직접 변경합
어두운 테마에서 초점 링을 숨깁니다.
어두운 배경에서는 텍스트가 너무 어둡습니다 (또는 밝은 배경에서는 조명).
전체 페이지로 긴 전환 (속도 저하).
다른 주제가 아닌 한 주제의 "독점" 상태 색상.
14) QA 체크리스트
대비 및 가독성
- 모든 AA 보조 텍스트; 중요한 레이블/작은 텍스트는 AAAA입니다.
- 오류/성공/경고는 색상으로 식별 할 수있을뿐만 아니라
행동
- 시스템은 '선호하는 색상 체계' 를 존중하고 OS 변경에 응답합니다.
- FOUC 없음 (렌더링 전에 테마가 적용됨).
- 테마를 전환해도 페이지 상태가 재설정되지 않습니다.
구성 요소
- 카드/양식/테이블은 토큰 만 사용합니다.
- 그래픽에는 두 테마에 대한 팔레트가 있습니다.
- 로고/아이콘은 두 테마 모두에서 올바르게 표시됩니다.
A11y
- 가시적 인 포커스 링; 고 대조 모드를 사용할 수 있습니다.
- '선호 감소 운동' 을 고려하십시오.
성능
- 전환은 200 ms입니다. 글로벌 리플로우없이.
- 컨테이너에 무거운 필터/블렌드가 없습니다.
15) 설계 시스템의 문서
테마 토큰: 팔레트, 대비, 상태 (호버/포커스/액티브/비활성화).
가이드: 회귀 대비없이 새로운 브렌도 악센트를 추가하는 방법.
차트/미디어: 밝은/어두운 곳에 사전 정의 된 팔레트.
패턴: FOUC없이 시스템 우선, 고 대비, 부드러운 전환.
Do/Do n 't: 반전, 인라인 색상, 보이지 않는 오류/초점 필터.
간략한 요약
작업 테마 스위치는 시맨틱 토큰 + 시스템 우선 + 깜박임 시작입니다. 대비를 캡처하고, 색상을 중앙 집중화하고, '선호하는 색 구성표' 를 존중하고, 모션을 줄이고, 사용자 선택을 저장하고, 큰 영향을 피 그런 다음 UI는 야간 라이브 경기에서 데이 박스 오피스 및 토너먼트 화면에 이르기까지 모든 환경에서 읽을 수 있고 인식 할 수 있습니다.