Tailwind CSS를 활용한 Dark Mode 구현하기

다크 모드는 사용자에게 더 편안하고 시각적으로 매력적인 경험을 제공하는 핵심적인 웹 디자인 트렌드 중 하나입니다. 이제 Tailwind CSS를 활용하여 웹 애플리케이션에 Dark Mode를 구현하는 방법을 알아보겠습니다.

 

시작하기 전에: Tailwind CSS 설치하기

Dark Mode를 구현하려면 먼저 Tailwind CSS를 프로젝트에 설치해야 합니다. 다음 명령을 사용하여 설치할 수 있습니다.

npm install tailwindcss

 

Dark Mode 설정

Tailwind CSS는 Dark Mode를 지원하기 위해 dark 클래스를 사용합니다. 이 클래스는 다크 모드와 라이트 모드 간 전환을 가능하게 해줍니다. 먼저, tailwind.config.js 파일을 열고 darkMode 설정을 추가합니다.

// tailwind.config.js
module.exports = {
    darkMode: 'class',
// ... 다른 설정
}

 

Dark Mode 스타일 추가

다크 모드 스타일은 기존 스타일에 추가되어야 합니다. 예를 들어, 다크 모드에서 배경색과 글자색을 변경하려면 다음과 같이 클래스를 추가합니다.

예시에서 bg-white는 라이트 모드 배경색, dark:bg-gray-800는 다크 모드 배경색을 나타냅니다.

<div className="bg-white dark:bg-gray-800 text-black dark:text-white">
<!-- 내용 -->
</div>

 

Dark Mode 토글 버튼 추가

사용자가 Dark Mode와 라이트 모드 간 전환할 수 있는 토글 버튼을 추가하면 좋습니다. 이를 위해 JavaScript를 사용하여 HTML 요소의 클래스를 조작합니다.

// 토글 버튼
<button id="darkModeToggle" class="text-gray-600 dark:text-gray-400">Dark Mode 토글</button>

/* _app.js */
const darkModeToggle = document.getElementById('darkModeToggle');

darkModeToggle.addEventListener('click', () => {
    document.documentElement.classList.toggle('dark');
});

 

Tailwind CSS를 활용한 Dark Mode 구현 정리

Tailwind CSS를 사용하여 웹 애플리케이션에 Dark Mode를 구현하는 방법을 알아보았습니다. Dark Mode는 사용자 경험을 향상시키는 데 도움이 되며, Tailwind CSS의 간편한 클래스 기반 접근을 통해 쉽게 구현할 수 있습니다. 접근성을 고려하여 디자인을 조절하면서 사용자들에게 더 나은 환경을 제공해보세요.

마지막으로 사용자의 Light/Dark Mode 환경을 무시 후 Dark Mode를 우선 적용하는 방법을 전달드리며 글 마무리하겠습니다.

 

// 다크모드 고정
useEffect(() => {
    document.documentElement.classList.add('dark') // 처음 페이지 로드 시 'dark' 클래스를 추가
}, [])