반응형
다크모드 적용 방법 (Tailwind 기반)
1. tailwind.config.js 파일에 옵션 추가
/** @type {import('tailwindcss').Config} */
export default {
darkMode: "class", // 이 줄 추가
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
};darkMode: "class"로 설정하면처럼 다크모드 적용 여부를 수동으로 제어할 수 있음
2. index.html에 dark 클래스 추가 (기본 다크모드로 시작할 경우)
<html lang="ko" class="dark">
또는 React에서 자동 적용하려면 document.documentElement.classList.add("dark")로 설정
3. 다크모드 토글 버튼 + 적용 예시
<button
onClick={() => {
const html = document.documentElement;
const isDark = html.classList.contains("dark");
if (isDark) {
html.classList.remove("dark");
localStorage.theme = "light";
} else {
html.classList.add("dark");
localStorage.theme = "dark";
}
}}
className="px-2 py-1 text-xl bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
>
<span className="dark:hidden">🌙</span>
<span className="hidden dark:inline">☀️</span>
</button>
4. 다크모드가 적용될 요소에 클래스 추가
<div className="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
다크모드와 라이트모드 모두 대응하는 컴포넌트
</div>
💡 참고 팁
localStorage.theme를 사용하면 새로고침 후에도 사용자 설정 유지 가능transition-colors duration-300클래스를 쓰면 전환 시 부드럽게 애니메이션 적용
반응형
'Front-End > React' 카테고리의 다른 글
| React + Vite + TypeScript 자주 쓰는 셋업 정리 (ESLint + Prettier 포함) (7) | 2025.08.05 |
|---|
댓글