84. 다크모드 전환 상태

사용자 선택

명시적으로 선택한 테마를 최우선으로 적용

시스템 설정

사용자 선택이 없으면 OS 다크모드 설정을 따름

기본값

설정이 없으면 라이트 모드를 기본으로 사용

테마 전환 플로우

사용자 토글 클릭

다크/라이트 모드 전환 버튼 클릭

상태 업데이트

현재 테마 상태를 메모리에 업데이트 (state/store)

CSS 클래스 적용

html/body 요소에 'dark' 클래스 추가/제거

트랜지션 애니메이션

모든 요소가 부드럽게 색상 전환 (200-300ms)

영구 저장

localStorage에 사용자 선택 저장

구현 예시

/* CSS 변수로 테마 정의 */
:root {
  --bg-primary: #ffffff;
  --text-primary: #111827;
}

.dark {
  --bg-primary: #1f2937;
  --text-primary: #f9fafb;
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: all 0.3s;
}

// JavaScript 테마 전환
function toggleTheme() {
  const html = document.documentElement;
  const isDark = html.classList.contains('dark');

  if (isDark) {
    html.classList.remove('dark');
    localStorage.setItem('theme', 'light');
  } else {
    html.classList.add('dark');
    localStorage.setItem('theme', 'dark');
  }
}

실제 콘텐츠 미리보기

샘플 이미지

다크모드의 장점

다크모드는 어두운 환경에서 눈의 피로를 줄이고, OLED 화면에서 배터리를 절약할 수 있습니다. 또한 장시간 컴퓨터를 사용하는 사용자들에게 편안한 경험을 제공합니다.

구현 시 고려사항

• 대비율 유지 (최소 4.5:1)
• 순수 검정색 사용 자제 (#1f2937 권장)
• 이미지와 아이콘의 가시성 확인
• 테마 전환 시 깜빡임 방지

영구 저장 방법

💾

localStorage

클라이언트 측 저장
빠르고 간단

🍪

서버 렌더링 시
초기 테마 적용

👤

사용자 계정

로그인 시
크로스 디바이스

🖥️

시스템 감지

prefers-color-scheme
자동 동기화

엣지 케이스 처리

시스템 설정 변경 감지

앱 실행 중 OS 다크모드가 변경되면 matchMedia로 감지하여 업데이트

임베디드 콘텐츠

iframe이나 서드파티 위젯은 테마 변경을 지원하지 않을 수 있음 - 경계 스타일 조정

플래시 방지

페이지 로드 시 잘못된 테마가 잠깐 보이는 것을 방지 - 인라인 스크립트로 사전 적용

애니메이션 감소 모드

prefers-reduced-motion이 활성화되면 트랜지션 비활성화

다크모드 전환 상태

테마 우선순위

구현 예시

실제 콘텐츠 미리보기

영구 저장 방법

디자인 프롬프트