❌ 색 반전이 안 되는 이유

1. 이미지/로고 색깔이 망가짐
2. 대비가 너무 강해 눈 피로
3. 채도 높은 색은 어두운 배경에서 진동(vibrate)

🎨 다크 모드 원칙 5가지

① 진짜 검정(#000) 쓰지 마라

OLED 절전엔 좋지만 콘텐츠 대비가 너무 강함. #0f172a, #18181b 같은 짙은 회색을 쓰세요. Material Design은 #121212 권장.

② 흰 텍스트도 진짜 흰색 쓰지 마라

#fff 대신 #f1f5f9 또는 rgba(255,255,255,0.87). 검정 배경에 흰 글씨는 헤일로 효과로 글자가 진동해 보입니다.

③ 채도 낮추기

밝은 모드 #2563eb (sat 90%) → 다크 모드 #60a5fa (sat 60%). 색상 변환으로 HSL 조정.

④ 깊이는 그림자 대신 명도로

밝은 모드는 그림자로 레이어 분리. 다크 모드는 그림자가 안 보임 → 배경색 단계별로 밝게: #0f172a / #1e293b / #334155.

⑤ 대비 4.5:1 유지

WCAG 표준. 대비 검사 도구로 검증.

🔧 CSS 변수 패턴

:root {
  --bg: #ffffff;
  --text: #1e293b;
  --accent: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f172a;
    --text: #f1f5f9;
    --accent: #60a5fa;
  }
}

🛠 도구

• 색상 변환: HEX/HSL/RGB
• 대비 검사: WCAG 대비
• 팔레트: 팔레트 생성기

💡 검증법: 다크 모드로 30분 본 뒤 라이트 모드 전환. 눈 안 아프면 OK, 아프면 대비 조정.