[Tailwind CSS] 다크모드 처리하기!
글쓰게된 계기
오늘부터 친구들이 나의 포폴사이트를 보면서 피드백해주고 있다. 그러다가 친구가 오잉 글씨가 안보여!! 라고 말해서 확인해보니, 다크모드에서 글씨 색상이 문제였던 것...!!! 덕분에 문제점을 알게되었고, 바아로 수정했다 ㅎㅎ
tailwind css로 다크모드 처리하기
미디어 쿼리 사용하기
사용자의 시스템 설정에 따라 다크 모드를 자동 적용하는 방법이다. 그럼 좀 더 자세히 알아보자!
tailwind.config.ts수정하기
module.exports = {
darkMode: 'media',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}- tailwind css 클래스 사용해서 다크모드 스타일링하기
<!-- 다크모드일 때, 배경색상은 검정, 글자색상은 하얀색으로 설정한다. -->
<div class="bg-white dark:bg-black text-black dark:text-white">
...
</div>클래스 기반 다크 모드
클래스 토글 (즉, 사용자의 선택)을 통해 다크 모드 전환을 할 수 있다. 자세한 방법은 아래를 참고하면 된다.
tailwind.config.ts수정하기
module.exports = {
darkMode: 'class',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}- 다크 모드 토글 스크립트 작성하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
<title>다크모드 토글 스크립트 예시!!!!</title>
<script>
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
}
</script>
</head>
<body class="bg-white dark:bg-black text-black dark:text-white">
<button onclick="toggleDarkMode()">토글 다크 모드 설정</button>
<!-- 다크 모드 지원 -->
...
</body>
</html>다크모드 색상 지정하기
tailwind.config.js 에서 primaryColor를 지정해줬는데, 다크 모드에서는 변경이 필요했다. 그래서 light, dark 각 모드마다 설정할 primaryColor를 다르게 해줄 필요가 있었고, 설정한 방법은 다음과 같다!
tailwind.config.ts수정하기
module.exports = {
darkMode: 'class', // media도 가넝!
theme: {
extend: {},
colors: {
primaryColor: {
light: '#3b82f6', // 라이트 모드 색상
DEFAULT: '#2563eb', // 기본 색상
dark: '#1e40af', // 다크 모드 색상
},
},
},
variants: {
extend: {},
},
plugins: [],
}- css 클래스 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
<title>다크모드 토글 스크립트 예시!!!!</title>
<script>
function toggleDarkMode() {
document.documentElement.classList.toggle('dark');
}
</script>
</head>
<body class="bg-white dark:bg-black text-black dark:text-white">
<div class="p-6">
<!-- bg-primary-dark 이런식으로 적용.. -->
<button class="bg-primary-light dark:bg-primary-dark text-white py-2 px-4 rounded">
Primary Button
</button>
</div>
<button onclick="toggleDarkMode()">토글 다크 모드 설정</button>
<!-- 다크 모드 지원 -->
...
</body>
</html>
능력이 없는 것을 두려워 말고, 끈기 없는 것을 두려워하라