다크 모드

다크 모드 (Dark Mode)

운영체제에 다크 모드가 기본 기능으로 자리잡으면서, 사이트의 어두운 버전을 함께 설계하는 경우가 많아졌어요. Tailwind는 dark 변형을 제공해서, 다크 모드가 켜졌을 때 사이트를 다르게 스타일링할 수 있게 해 줘요.

출처: Tailwind CSS — Dark mode

dark 변형으로 다크 스타일 적용하기

dark: 접두사가 붙은 유틸리티를 쓰면 다크 모드가 활성화된 상태에서만 해당 스타일이 적용돼요.

<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5">
  <div>
    <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg">
      <svg class="h-6 w-6 stroke-white" ...>
        <!-- ... -->
      </svg>
    </span>
  </div>
  <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes upside-down</h3>
  <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

기본적으로 dark 변형은 CSS의 prefers-color-scheme 미디어 기능을 사용해요. 그래서 운영체제가 다크 모드라면 자동으로 다크 스타일이 적용돼요.

수동으로 다크 모드 토글하기

prefers-color-scheme 대신 CSS 선택자를 기준으로 다크 테마를 켜고 싶다면, dark 변형을 자신의 선택자로 덮어쓰면 돼요.

/* app.css */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

이제 dark:* 유틸리티는 prefers-color-scheme에 의존하지 않고, HTML 트리에서 더 위쪽에 dark 클래스가 있을 때 적용돼요.

<html class="dark">
  <body>
    <div class="bg-white dark:bg-black">
      <!-- ... -->
    </div>
  </body>
</html>

html 요소에 dark 클래스를 언제 붙일지는 프로젝트의 몫이에요. 가장 흔한 방법은 작은 자바스크립트로 저장된 설정이나 시스템 값을 읽어 class 속성을 갱신하는 것이에요. 이렇게 하면 사용자가 테마를 직접 골라 토글하는 사이트를 쉽게 만들 수 있어요.

더 알아보기