uiux·발행 2026.07.25

Light, Auto mode, Dark mode의 가족

다크 모드 시대에 함께 등장한 색 테마 옵션들입니다. Light, Dark, Auto 3가지 모드의 의미와 CSS, Tailwind 구현법을 정리합니다.

한 줄로

다크 모드 시대에 함께 등장한 색 테마 옵션들입니다. Light(기본), Dark(어두움), Auto(시스템 따라)입니다.

Light mode

종이 메타포의 기본입니다. 흰 배경에 검은 글자입니다. 1984년 매킨토시 이후 35년간 컴퓨터의 디폴트였습니다.

지금도 대부분의 사용자가 기본으로 light mode를 사용합니다. 통계로는 안드로이드 사용자의 60~70%, iOS 사용자의 50~60%가 light mode를 씁니다.

Auto mode (System mode)

OS 설정에 따라 자동 전환됩니다. 보통:

낮: light mode.
밤: dark mode (사용자의 OS 설정 시간 기반).

iOS는 2019년 도입, Android 2019년, macOS 2018년에 도입했습니다. 거의 모든 모던 앱이 auto mode를 지원합니다.

CSS에서

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

prefers-color-scheme 미디어 쿼리로 OS 설정을 자동 감지합니다. Auto mode가 사실상 표준이 됐습니다.

Tailwind에서

<body class="bg-white dark:bg-gray-900 text-black dark:text-white">

dark: 접두사로 dark mode 변형을 지정합니다. Tailwind v3 이후 darkMode: 'media' 또는 'class' 두 가지 전략이 있습니다.

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

새 웹사이트는 light + dark + auto 3가지 모두 지원하는 게 표준입니다. Tailwind 사용 시 추가 작업 2~3시간이면 끝납니다. 사용자의 OS 설정을 존중하는 게 첫 친절입니다.

Light, Auto mode, Dark mode의 가족

한 줄로

Light mode

Auto mode (System mode)

CSS에서

Tailwind에서

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

관련

댓글 0

다른 일기도 같이.

Auto mode, System theme, color-scheme

Theming 상세, CSS Variables, Brand expression

Carbon, Polaris, Lightning, Spectrum, 엔터프라이즈 디자인 시스템 4종