Tailwind CSS - Dark Mode

김명원·2025년 1월 17일

learnTailwindCSS

목록 보기

6/10

Tailwind CSS 다크 모드

본 포스트는 기술 블로그 작성을 의뢰받아, 원본 내용을 삭제하지 않고 Tailwind CSS 전문가로서 필요 시 추가 설명만 덧붙여 정리한 글입니다.

개요

다크 모드는 현대 운영 체제에서 기본적으로 제공하는 기능으로, Tailwind CSS를 사용하면 웹사이트를 쉽게 다크 모드에 맞게 스타일링할 수 있습니다.
Tailwind는 다크 모드를 적용할 수 있는 유틸리티 클래스를 제공하며, 기본적으로 운영 체제의 선호도에 따라 다크 모드를 적용하거나, 사용자가 직접 선택할 수 있게끔 설정할 수 있습니다.

기본 사용법

Tailwind CSS에서 다크 모드를 사용하려면 기본적인 dark 유틸리티를 사용하여 요소의 스타일을 다크 모드일 때 다르게 적용할 수 있습니다.

예시

<div
  class="bg-white dark:bg-slate-800 text-slate-900 dark:text-white p-6 rounded-lg shadow-md max-w-lg"
>
  <h3 class="text-lg font-bold">Writes Upside-Down</h3>
  <p class="text-slate-600 dark:text-slate-400">
    The Zero Gravity Pen can be used to write in any orientation, including
    upside-down. It even works in outer space.
  </p>
</div>

dark:bg-slate-800
- 다크 모드가 활성화되면 배경색이 bg-white에서 bg-slate-800로 변경됩니다.
- slate-800은 어두운 회색 배경색을 의미합니다.
dark:text-white
- 다크 모드에서 텍스트 색상이 text-slate-900에서 text-white로 변경됩니다.
- 어두운 배경과 대비를 이루기 위해 흰색 텍스트가 주로 사용됩니다.
dark:text-slate-400
- 본문 텍스트 색상이 다크 모드에서 text-slate-600에서 text-slate-400으로 변경됩니다.
- 다크 모드에서 잘 보이도록 살짝 밝은 회색으로 설정됩니다.

다크 모드 전환 전략

1) 운영 체제 선호도 사용 (`media`)

Tailwind는 기본적으로 운영 체제의 다크 모드 선호도에 따라 스타일을 적용합니다. 이를 위해 CSS의 prefers-color-scheme 미디어 쿼리를 사용하며, 별도의 설정 없이 Tailwind에서 바로 사용할 수 있습니다.

2) 수동으로 다크 모드 전환 (`selector`)

다크 모드를 수동으로 전환하려면 Tailwind 설정 파일에서 다크 모드를 선택자로 설정해야 합니다.

// tailwind.config.js
module.exports = {
  darkMode: 'selector', // 선택자 전략(수동 전환)
  // ...
}

이렇게 설정하면 HTML에서 dark 클래스를 직접 추가/제거해 다크 모드를 제어할 수 있습니다.

다크 모드 수동 전환 예시

<html>
  <body class="dark">
    <div class="bg-white dark:bg-black text-slate-900 dark:text-white p-6 rounded-lg">
      다크 모드에서는 배경이 검정색으로 변합니다.
    </div>
  </body>
</html>

<html> 또는 <body> 태그에 dark 클래스를 추가하면, 다크 모드가 활성화됩니다.

다크 모드 토글 구현

다크 모드를 직접 토글하려면 JavaScript를 사용하여 dark 클래스를 추가/제거합니다. 이를 통해 사용자가 원할 때 다크 모드를 켜거나 끌 수 있습니다.

JavaScript를 통한 다크 모드 토글 예시

마크업

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tailwind CSS 다크 모드 실습</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // Tailwind 설정에서 다크 모드를 selector로 설정
    tailwind.config = {
      // darkMode: 'media', // 운영 체제의 모드에 맞게 설정
      darkMode: 'selector', // 수동으로 설정
    };
  </script>
</head>
<body class="bg-white text-black min-h-screen flex items-center justify-center">
  <div class="text-center">
    <h1 class="text-4xl font-bold mb-4">Tailwind CSS 다크 모드</h1>
    <p class="mb-6">이 페이지는 다크 모드를 지원합니다.</p>
    <button class="bg-blue-500 text-white px-4 py-2 rounded">
      다크 모드 전환
    </button>
    <div class="mt-6 bg-white p-6 rounded-lg shadow-lg">
      <p>이 박스는 다크 모드에서 배경이 어두운 색으로 변합니다.</p>
    </div>
  </div>
</body>
</html>

실습코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS 다크 모드 실습</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // Tailwind 설정에서 다크 모드를 selector로 설정
    tailwind.config = {
      // darkMode: 'media', // 운영 체제의 모드에 맞게 설정
      darkMode: 'selector', // 수동으로 설정
    }
  </script>
  <script>
    function toggleDarkMode() {
      document.documentElement.classList.toggle('dark');
    }
  </script>
</head>
<body class="bg-white dark:bg-gray-900 text-black dark:text-white min-h-screen flex items-center justify-center">
  <div class="text-center">
    <h1 class="text-4xl font-bold mb-4">Tailwind CSS 다크 모드</h1>
    <p class="mb-6">이 페이지는 다크 모드를 지원합니다.</p>
    <button onclick="toggleDarkMode()" class="bg-blue-500 text-white px-4 py-2 rounded">
      다크 모드 전환
    </button>
    <div class="mt-6 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
      <p>이 박스는 다크 모드에서 배경이 어두운 색으로 변합니다.</p>
    </div>
  </div>
</body>
</html>

Dark 모드를 위해 어떤 것이 추가되었고, 어떤 결과가 나왔는가?

tailwind.config에서 darkMode: 'selector'로 설정
- 기본적으로 다크 모드는 운영 체제(media) 설정을 따르지만, selector 옵션을 통해 직접 dark 클래스를 부착/제거하여 수동으로 제어할 수 있게 만들었습니다.
dark 클래스 사용
- body 태그에 bg-white dark:bg-gray-900 text-black dark:text-white 등과 같이, 다크 모드가 활성화되면 색상을 변경하도록 했습니다.
- 예: dark:bg-gray-900 → 다크 모드가 활성화되면 배경색을 gray-900으로 변경
- 예: dark:text-white → 다크 모드가 활성화되면 텍스트 색상을 흰색으로 변경
JavaScript로 dark 클래스 토글
- document.documentElement.classList.toggle('dark')를 통해 다크 모드를 켜고 끄는 버튼을 제공합니다.
- 버튼을 클릭하면, <html> 요소에 dark 클래스가 붙거나 제거되어, 다크 모드가 즉시 적용/해제됩니다.
결과
- 다크 모드 OFF: 기본 라이트 모드 색상(bg-white, text-black) 사용.
- 다크 모드 ON: dark:bg-gray-900, dark:text-white, 그리고 내부 요소 dark:bg-gray-800 등으로 색상이 어둡게 변경.

따라서 사용자가 버튼을 눌러 dark 클래스를 토글 → Tailwind CSS의 다크 모드 유틸리티에 의해 화면 전반의 색상(배경/글자)이 어둡게 전환됩니다.

시스템 설정 + 수동 다크모드 병행

Tailwind CSS는 운영 체제의 다크 모드 선호도(prefers-color-scheme: dark)를 감지하여 자동 적용할 수도 있고, 사용자가 원할 때 수동으로 전환할 수도 있습니다. 이는 localStorage와 window.matchMedia를 함께 사용하여 구현합니다.

시스템 선호도 감지 코드 예시

// 1. 시스템 선호도 및 localStorage 기반 초기 다크 모드 상태 설정
if (
  localStorage.theme === 'dark' ||
  (!('theme' in localStorage) &&
    window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
  document.documentElement.classList.add('dark');
} else {
  document.documentElement.classList.remove('dark');
}

// 2. 수동으로 다크 모드 전환하는 버튼 이벤트 리스너
document.getElementById('toggleDarkMode').addEventListener('click', () => {
  if (document.documentElement.classList.contains('dark')) {
    document.documentElement.classList.remove('dark');
    localStorage.theme = 'light';
  } else {
    document.documentElement.classList.add('dark');
    localStorage.theme = 'dark';
  }
});

코드 설명
1. 시스템 선호도 감지

localStorage.theme가 'dark'이면 다크 모드로 설정합니다.
localStorage에 설정이 없고, 시스템이 다크 모드를 선호하면(prefers-color-scheme: dark), 다크 모드를 활성화합니다.
아니라면 라이트 모드로 설정합니다.

수동 전환
- #toggleDarkMode 버튼을 클릭하면 dark 클래스를 토글하며, 현재 상태를 localStorage.theme에 저장합니다.

실습: Tailwind CSS 다크 모드 구현하기

실습 예제 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS 다크 모드 실습</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // Tailwind 설정에서 다크 모드를 selector로 설정
    tailwind.config = {
      // darkMode: 'media', // 운영 체제의 모드에 맞게 설정
      darkMode: 'selector', // 수동으로 설정
    }
  </script>
  <script>
    if (localStorage.theme === 'dark' ||
      (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }

    function toggleDarkMode() {
      if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.theme = 'light';
      } else {
        document.documentElement.classList.add('dark');
        localStorage.theme = 'dark';
      }
    }
  </script>
</head>
<body class="bg-white dark:bg-gray-900 text-black dark:text-white min-h-screen flex items-center justify-center">
  <div class="text-center">
    <h1 class="text-4xl font-bold mb-4">Tailwind CSS 다크 모드</h1>
    <p class="mb-6">이 페이지는 다크 모드를 지원합니다.</p>
    <button onclick="toggleDarkMode()" class="bg-blue-500 text-white px-4 py-2 rounded">
      다크 모드 전환
    </button>
    <div class="mt-6 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
      <p>이 박스는 다크 모드에서 배경이 어두운 색으로 변합니다.</p>
    </div>
  </div>
</body>
</html>

코드 분석

1. Tailwind CSS 다크 모드 설정

<script>
  tailwind.config = {
    // darkMode: 'media', // 운영 체제의 모드에 맞게 설정
    darkMode: 'selector', // 수동으로 설정
  }
</script>

설명:
- tailwind.config는 Tailwind CSS의 설정을 정의하는 객체입니다.
- darkMode: 'media': 사용자의 운영 체제 설정에 따라 다크 모드가 자동으로 활성화됩니다.
- darkMode: 'selector': 사용자가 직접 다크 모드 상태를 제어할 수 있도록 설정합니다.
- 이 예제에서는 'selector' 모드를 사용하여 다크 모드를 수동으로 토글하도록 설정했습니다.

2. 초기 다크 모드 상태 설정

<script>
  if (localStorage.theme === 'dark' ||
    (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
</script>

설명:
- 다크 모드 상태를 브라우저의 localStorage와 prefers-color-scheme 설정에 따라 초기화합니다.
- localStorage.theme === 'dark': 로컬 스토리지에서 테마가 다크 모드로 저장된 경우.
- !('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches:
  - 로컬 스토리지에 테마 정보가 없고, 운영 체제의 기본 설정이 다크 모드인 경우.
- 해당 조건을 만족하면 <html> 태그에 class="dark"를 추가하여 다크 모드를 활성화합니다.
- 그렇지 않으면 class="dark"를 제거하여 라이트 모드로 초기화합니다.

3. 다크 모드 토글 함수

function toggleDarkMode() {
  if (document.documentElement.classList.contains('dark')) {
    document.documentElement.classList.remove('dark');
    localStorage.theme = 'light';
  } else {
    document.documentElement.classList.add('dark');
    localStorage.theme = 'dark';
  }
}

설명:
- 버튼 클릭 시 호출되어 다크 모드와 라이트 모드를 전환합니다.
- document.documentElement.classList.contains('dark'):
  - 현재 <html> 태그에 class="dark"이 존재하면 다크 모드로 간주.
- 다크 모드 상태를 변경한 후, 로컬 스토리지에 새 상태를 저장합니다:
  - 다크 모드 활성화 시: localStorage.theme = 'dark'
  - 라이트 모드 활성화 시: localStorage.theme = 'light'

4. HTML 구조 및 Tailwind CSS 클래스

<body class="bg-white dark:bg-gray-900 text-black dark:text-white min-h-screen flex items-center justify-center">

설명:
- Tailwind CSS의 다크 모드 클래스가 포함된 구조입니다.
- bg-white: 기본 배경색을 흰색으로 설정.
- dark:bg-gray-900: 다크 모드 활성화 시 배경색을 진회색으로 변경.
- text-black: 기본 텍스트 색상을 검정으로 설정.
- dark:text-white: 다크 모드 활성화 시 텍스트 색상을 흰색으로 변경.

<button onclick="toggleDarkMode()" class="bg-blue-500 text-white px-4 py-2 rounded">
  다크 모드 전환
</button>

설명:
- 버튼 클릭 시 toggleDarkMode 함수가 호출되어 다크 모드가 토글됩니다.
- 버튼 스타일:
  - bg-blue-500: 파란색 배경.
  - text-white: 흰색 텍스트.
  - px-4 py-2: 패딩.
  - rounded: 테두리를 둥글게.

<div class="mt-6 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
  <p>이 박스는 다크 모드에서 배경이 어두운 색으로 변합니다.</p>
</div>

설명:
- Tailwind CSS 클래스가 다크 모드에 따라 동적으로 스타일을 변경합니다:
  - bg-white: 기본 배경색 흰색.
  - dark:bg-gray-800: 다크 모드에서 배경색을 짙은 회색으로 변경.
  - p-6: 내부 여백 설정.
  - rounded-lg: 둥근 모서리.
  - shadow-lg: 그림자 효과.

참고 문서

Tailwind CSS Dark Mode Documentation

결론

운영 체제 선호도(media): 운영 체제의 라이트/다크 모드 선호도에 따라 자동 적용할 수 있습니다.
수동 다크 모드(selector): dark 클래스를 HTML 요소에 붙여 원하는 시점에 다크 모드를 적용할 수 있습니다.
JavaScript 토글: 사용자가 직접 다크 모드를 끄고 켤 수 있도록 구현 가능하며, localStorage를 활용해 설정을 기억합니다.

이처럼 Tailwind CSS는 간단한 유틸리티 클래스와 설정만으로도 다크 모드를 손쉽게 지원하므로, 사용자 경험을 높이는 데 많은 도움이 됩니다.

김명원

개발자가 되고 싶은 정치학도생의 기술 블로그

이전 포스트

Tailwind CSS - Transition & Animation

다음 포스트

Tailwind CSS - Dark Mode

learnTailwindCSS

Tailwind CSS 다크 모드

개요

기본 사용법

예시

다크 모드 전환 전략

1) 운영 체제 선호도 사용 (`media`)

2) 수동으로 다크 모드 전환 (`selector`)

다크 모드 수동 전환 예시

다크 모드 토글 구현

JavaScript를 통한 다크 모드 토글 예시

마크업

실습코드

Dark 모드를 위해 어떤 것이 추가되었고, 어떤 결과가 나왔는가?

시스템 설정 + 수동 다크모드 병행

시스템 선호도 감지 코드 예시

실습: Tailwind CSS 다크 모드 구현하기

실습 예제 코드

코드 분석

1. Tailwind CSS 다크 모드 설정

2. 초기 다크 모드 상태 설정

3. 다크 모드 토글 함수

4. HTML 구조 및 Tailwind CSS 클래스

참고 문서

결론

Tailwind CSS - Transition & Animation

Tailwind CSS - 포트폴리오를 만들어보자 (설정부터 UI 계획 후 Header까지)

0개의 댓글

Tailwind CSS - Dark Mode

learnTailwindCSS

Tailwind CSS 다크 모드

개요

기본 사용법

예시

다크 모드 전환 전략

1) 운영 체제 선호도 사용 (media)

2) 수동으로 다크 모드 전환 (selector)

다크 모드 수동 전환 예시

다크 모드 토글 구현

JavaScript를 통한 다크 모드 토글 예시

마크업

실습코드

Dark 모드를 위해 어떤 것이 추가되었고, 어떤 결과가 나왔는가?

시스템 설정 + 수동 다크모드 병행

시스템 선호도 감지 코드 예시

실습: Tailwind CSS 다크 모드 구현하기

실습 예제 코드

코드 분석

1. Tailwind CSS 다크 모드 설정

2. 초기 다크 모드 상태 설정

3. 다크 모드 토글 함수

4. HTML 구조 및 Tailwind CSS 클래스

참고 문서

결론

Tailwind CSS - Transition & Animation

Tailwind CSS - 포트폴리오를 만들어보자 (설정부터 UI 계획 후 Header까지)

0개의 댓글

1) 운영 체제 선호도 사용 (`media`)

2) 수동으로 다크 모드 전환 (`selector`)