Auto mode, System theme, color-scheme

Auto mode 동작

사용자가 OS 설정에서 정한 테마를 자동 감지해 적용합니다. 2024년 거의 모든 모던 앱의 표준입니다.

CSS:

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #e0e0e0;
  }
}

JavaScript:

const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

사용자 선호도 vs 시스템 설정

좋은 도구는 3가지 옵션을 제공합니다.

1. Light: 강제 라이트.
2. Dark: 강제 다크.
3. Auto: 시스템 따라.

자동만 제공하면 사용자가 시스템과 다른 선호를 가질 수 없습니다. 항상 수동 옵션도 둡시다.

color-scheme CSS 속성

:root {
  color-scheme: light dark;
}

이 한 줄이 브라우저에게 "이 사이트는 두 모드 모두 지원"임을 알립니다. 시스템 컴포넌트(스크롤바, 폼 필드)가 자동으로 적응합니다.

다국적 동기화

Apple과 Google은 본인 OS의 다크 모드 상태를 모든 디바이스에 동기화합니다. iPhone에서 다크 모드를 설정하면 같은 Apple ID의 Mac·iPad도 자동으로 다크가 됩니다.

바이브 메이커가 챙길 한 가지

본인 사이트의 모든 색 정의를 CSS 변수로 옮기고, @media (prefers-color-scheme: dark) 한 블록만 추가하면 다크 모드가 완성됩니다. 1시간 작업입니다.

관련

Dark mode · Light Dark Auto mode · Theming