Tailwind - 다크모드

#Web/CSS


Tailwind는 다크 모드를 적용할 수 있는 유틸리티 클래스를 제공하며, 기본적으로 운영 체제의 선호도에 따라 다크 모드를 적용하거나, 사용자가 직접 선택할 수 있게끔 설정할 수 있다.


예시: 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>

평시와, 다크 모드가 활성화되었을 때 스타일을 각각 지정한다.


다크 모드 전환 전략

운영 체제 선호도 사용 (기본 전략,media)

Tailwind는 기본적으로 운영 체제의 다크 모드 선호도에 따라 스타일을 적용합니다. 이를 위해 CSS의 prefers-color-scheme 미디어 쿼리를 사용합니다. (별도의 설정 없이 필요 없다.)


수동으로 다크 모드 전환 (선택자 전략,selector)

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

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


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

여기서 dark 클래스를또는태그에 추가하면 다크 모드가 활성화된다.


다크모드 토글 구현

button의 onclick에 메서드를 지정하여 다크 모드 토글 기능을 구현해보자.


<!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>

로컬 스토리지에 다크 모드 설정 캐싱해두기

<!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>

Reference)
Tailwind CSS 공식 문서
짐코딩님 Tailwind CSS 완전 정복

'WEB > CSS' 카테고리의 다른 글

Tailwind - 트랜지션, 애니메이션  (0) 2025.02.13
Tailwind - 반응형 디자인  (0) 2025.02.13
Tailwind - Layout(Container, Flexbox, Grid, Position)  (0) 2025.02.13
Tailwind - Core(Utility-First CSS, State)  (0) 2025.02.13
Tailwind - 간격 조절, Sizing  (0) 2025.02.13

티스토리툴바