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>
'FE > 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 |