어두운 모드와 시각적 편안함

1) 어두운 테마 인 이유

저조도, 눈부심 및 "조명 플래시" 에서 눈의 편안함.
에너지: 다크 스크린은 OLED/AMOLED에서 배터리를 덜 소비합니다.
데이터 초점: 배경이 아닌 컨텐츠에 중점을 둡니다.
사용자 기대: 시스템 플래그 '선호 색상 구성' 이 사실상 표준입니다.

2) 원칙

1. 어두운 회색 배경> UI 표면의 경우 순수한 검은 색 (가독성 및 그라데이션 향상).
2. 내용의 대조: "검은 색의 흰색" 이 아니라 긴 텍스트의 경우 부드러운 색조.
3. 주의 깊은 "광도": 백라이트/악센트는 흐릿하지만 구별 할 수 있습니다.
4. 그림자 번호 깊이: 우리는 날카로운 대비가 아닌 빛/흐린 그림자로 작업합니다.
5. 가용성: WCAG AA (최소), 가시적 인 초점 및 이해할 수있는 상태.
6. 시스템 설정은 기본 설정입니다: 자동 전환 및 "이동 감소".

3) 팔레트 및 토큰 (예)

json
{
"mode": "dark",
"color": {
"bg": { "base": "#0E1116", "elev1": "#141821", "elev2": "#1A1F2B", "subtle": "#0B0E13" },
"fg": { "primary": "#E6E8EB", "muted": "#A6AEB8", "inverse": "#11131A" },
"accent": { "primary": "#6EA0FF", "warning": "#FFB547", "critical": "#FF6A6A", "success": "#66D19E" },
"border": { "soft": "#2A2F37", "strong": "#3A4150" },
"chart": { "a": "#6EA0FF", "b": "#66D19E", "c": "#FFB547", "d": "#C58CFF", "e": "#7DD3FC" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.35)", "md": "0 6px 18px rgba(0,0,0,.45)" }
}

css
@media (prefers-color-scheme: dark) {
:root {
--bg-base:#0E1116; --bg-elev1:#141821; --bg-elev2:#1A1F2B;
--fg-primary:#E6E8EB; --fg-muted:#A6AEB8;
--accent:#6EA0FF; --warning:#FFB547; --critical:#FF6A6A; --success:#66D19E;
--bd-soft:#2A2F37; --bd-strong:#3A4150;
}
}

• 어두운 모드의 악센트는 빛 모드보다 + 8-12% 더 가볍습니다.
• 넓은 영역 (예외-AMOLED 모드) 의 경우 절대 # 000을 피하면서 회색조 (4-5 단계) 를 사용하십시오.

4) 텍스트 및 가독성

본문: 밝은 회색 '# E6E8EB' ~ '# 0E1116' (대비 ~ 12:1).
이차 텍스트: '# A6AEB8'; 힌트-한 걸음 더 어둡고 투명합니다.
긴 독서: 약간 따뜻한 색조 ("할로" 감소).
링크 - 악센트 + 기본적으로 밑줄; 색상은 의미의 유일한 매체입니다.

5) 표면, 깊이 및 유리

고도: 'base' → 'elev1' → 'elev2'; 각 층은 2-4% 더 가볍고 따뜻합니다.
그림자는 부드럽고 넓으며 불투명도가 낮습니다. "빛나는" 뇌졸중을 피하십시오.
반투명 패널 (흐림) 은 적당히 적합합니다. 텍스트와 언더 레이를 대조하십시오.
구분 기호는 반 얇은 경계 '-bd-soft' 또는 간신히 보이는 "상속인" 입니다.

6) 국가와 초점

호버: + 2-3% 더 가벼운 배경; 활성: -2-3% (어두운).
초점: 투명 링 (예: '개요: 2px solid # 6EA0FF; 개요 오프셋: 2px; '), 악센트 버튼에서 볼 수 있습니다.
장애인: 조심스럽게 대비를 줄입니다 텍스트의 읽을 수 있는 단계 아래로 떨어지지 않습니다.

7) 단추, 양식 및 테이블

기본: 배경 '-악센트', 텍스트 '# 0E1116'.
이차: 배경 '-bg-elev1', 테두리 '-bd-strong', 텍스트 '-fg-primary'.
입력 필드: 배경 '-bg-elev1', 초점-악센트 테두리; 자리 표시자는 더 흐리지 만 읽을 수 있습니다.
테이블: 얼룩말 배경은 거의 눈에 띄지 않으며 호버에서 행 선택은 + 2-3% 더 가볍습니다.

8) 삽화, 로고 및 사진

로고 및 픽토그램-어두운 곳의 반전 버전; 포화 된 배경에서 얇고 가벼운 선을 피하십시오.
사진: 상단에 대조적 인 헤더를 위해 어두운 마스크 (40-60%) 를 추가하십시오.
아이콘: 단일 두께, 윤곽 + 채우기-조건에 따라 "유독 한" 색상이 아닙니다.

9) 어두운 테마의 데이터 시각화

행의 색상은 적당한 채도입니다. 적어도 5 가지의 뚜렷한 톤.
격자 및 축-음소거 (알파 20-30%), 서명- '-fg 음소거'.
주석/사건은 생생하지만 읽을 수 있습니다. 색상뿐만 아니라 모양/마커로 밑줄을 긋습니다.
빈 데이터/지연-흰색 필드가 아닌 부드러운 "안개".

10) 성능 및 배터리

OLED는 실제로 순수한 검은 색 (# 000) 을 절약합니다. 사용자 옵션에 따라 AMOLED 모드에서 사용하십시오.
약한 GPU에서 단단한 큰 글로우/블러를 피하십시오.
'선호 감소 모션' 존중: 단순화 애니메이션/전환.

11) 행동 및 전환

기본값은 '선호하는 색 구성표' 를 따르는 것입니다.
사용자에게 명시 적 스위치 (Light/Dark/System) 를 제공하고 선택을 유지하십시오 (쿠키/로컬 스토리지).
테마를 변경할 때-플래시 없음: 렌더링 전에 테마 클래스를 사전 추가하십시오.

@ info: whatsthis

html
<script>
const saved = localStorage. getItem('theme');
const sysDark = window. matchMedia?.('(prefers-color-scheme: dark)'). matches;
document. documentElement. dataset. theme = saved?? (sysDark? 'dark': 'light');
</script>

12) 가용성 (A11y)

텍스트 대비 5:1 (일반), 3:1 (큰).
상태를 색상으로 만 인코딩하지 마십시오. 아이콘/패턴/시그니처를 사용하십시오.

포커스 스타일과 키보드 탐색이 필수입니다

VoiceOver/TalkBack: 역할, 라벨, 타바 큐잉.

13) 반 패턴

넓은 지역에서 절대적으로 검은 색 배경에 절대적으로 흰색 텍스트 - "깜박임" 과 피로.
어두운 곳에서 네온 악센트 - "가벼운 소음".
높은 대비 그림자 (단단한 테두리가있는 검은 색의 회색).
마스크없이 사진의 투명한 텍스트.
사라지는 자리 표시자 (알파가 너무 낮음).

14) 구성 요소의 예

버튼

css
.button {
background: var(--accent); color: var(--bg-base);
border-radius: 12px; padding: 10px 16px;
box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.button:hover { filter: brightness(1. 06); }
.button:active { filter: brightness(.94); }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

카드

css
.card {
background: var(--bg-elev1); border: 1px solid var(--bd-soft); border-radius: 12px;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

15) 테스트 계획

조명: 어두운 방/일광/거리 저녁.
장치: OLED 및 IPS, 모바일/데스크톱, 다른 밀도.
A11y: 조영 검사기, 키보드 패스, 플레이스 홀더의 가독성.
지각: 밤에 ab-test "눈 피로" 및 입력 오류.
성능: 어두운 테마를 포함시킨 후 RUM 메트릭 (INP/CLS); GPU 부하 (흐림/그림자 효과).

16) 품질 지표

위반/1k 요소 대비 (대상: → 0).

"너무 어둡거나 밝은" 에 대한 불만

야간 세션 완료 (세션 22: 00-06: 00의 행동 지표).
다크 모드 vs 라이트의 INP/CLS p75 (기본보다 나쁘지 않음).
테마를 선택하는 사용자의 다크 모드 및 보존 옵트.

17) 발사 점검표

• 4-5 표면 레벨의 어두운 테마 팔레트
• 텍스트/아이콘/테두리의 대조는 WCAG AA에 해당합니다
• 눈에 보이는 포커스 스타일과 상태 (호버/액티브/비활성화)
• 로고/아이콘/사진 조정, 사진 마스크 추가
• 그래프-음소거 그리드, 읽을 수있는 캡션, 유독하지 않은 행
• 빛/어두운/시스템 스위치, "플래시" 없이 선택 저장
• '선호 색상 체계' 및 '감소 운동 선호' 에 대한 존중
• RUM/perf-dashboard, 회귀 경고

18) 구현 계획 (3 회 반복)

반복 1-기초 (1-2 주)

팔레트/토큰, 기본 표면 (기본/elev1/elev2), 텍스트/테두리, 버튼/필드/테이블, 테마 스위치.

Iteration 2-과립 성 (3-4 주)

어두운 그래프 및 삽화, 사진의 마스크, 초점/상태, 감소 운동, perf 감사를 고려한 애니메이션.

Iteration 3-최적화 (연속)

옵션, 미세 조정 대비, 야간 유용성 테스트, Light vs Dark RUM 비교, 일반 브랜드/UX 감사로서의 AMOLED 모드.

19) 미니 -FAQ

순수한 검은 색 배경을 만들어야합니까?
UI의 경우 짙은 짙은 회색이 더 좋습니다. "AMOLED 모드" 옵션으로 순수한 # 000을 남겨 두십시오.

악센트의 채도를 높여야합니까?
어두운 곳에서는-일반적으로 "빛나지 않도록" 약간 밝아지고 채도를 줄입니다.

배너 이미지는 어떻습니까?
어두운 배경/마스크를 추가하고 텍스트와 로고의 대비를 확인하십시오.

합계

어두운 테마는 색상 반전이 아니라 사려 깊은 팔레트, 표면 레벨, 가독성, 올바른 상태, 적응 형 그래픽 및 미디어, 시스템 설정에 대한 존중과 같은 별도의 디자인 모드입니다. 토큰, 제어 대비 및 성능을 기대하십시오. 다크 모드는 야간 및 주간 사용자에게 편리하고 안정적이며 아름다운 도구입니다.