TailwindCSS 세팅 (4) - Next.js에 darkmode 적용하기
📌시작하며
이번에는 Tailwind를 이용해 간단하게 다크모드를 구현 할 수 있었는데, 관련내용을 정리하고자 한다.
이 글은 아래와 같이 이어집니다.
✅Tailwind.config.js
먼저 Tailwind에게 dark 모드를 사용할 것이라고 알려주자.
1
2
3
4
5
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: "selector",
// ...
}
다른 자료를 찾아보았을 때 darkMode: "class"라고 작성되어 있어서 헷갈렸는데, Tailwind CSS v3.4.1에서 class가 selector로 대체 되었다! 자세한 건 공식문서를 참고하자.
✅dark모드 스타일 작성법
이렇게 작성해 두고, 최상위인 HTML 태그에 dark 클래스를 작성하거나 삭제하여 dark모드를 구현할 수 있다. (이 로직은 개발자가 구현해야 한다.)
Tailwind에서 자주 사용헀던 hover:bg-red-100 처럼 dark:bg-red-100와 같이 작성하면 HTML태그에 dark가 들어갔을 때(다크 모드를 선택했을 때) 해당 클래스가 적용된다.
1
2
3
4
5
6
7
8
9
<!-- Dark mode enabled -->
<html class="dark"👈>
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black👈">
<!-- ... -->
</div>
</body>
</html>
✅컬러 일괄 적용
그런데… 문제가 있다! 만들어 둔 컴포넌트도 많고 그 안의 엘리먼트들은 훨씬많은데, dark키워드를 하나하나 작성해야할까? 생각만 해도 너무 아찔하지 않은가…🥹 그래서 구글링을 통해 방법을 찾았다.
➡️global.css
먼저 global.css에 원하는 컬러값들을 다음과 같이 지정한다.
1
2
3
4
5
6
7
8
9
@layer base {
:root {
--blue: 31 87 247;
}
:root[class~="dark"] {
--blue: 46 109 244;
}
}
➡️tailwind.config.js
이렇게 CSS 변수에 컬러를 지정한다음 tailwind.config.js에 컬러를 등록해주면 된다!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import type { Config } from "tailwindcss"
import colors from "tailwindcss/colors"
const config: Config = {
darkMode: "selector",
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
colors: {
music: {
blue: "rgb(var(--blue) / 1)",
},
},
},
}
export default config
그럼 이제 bg-music-blue 와 같이 작성하면, dark모드 적용시에는 css의 dark 버전에 정의한 색이, 아니라면 기본컬러가 적용된다.
✅transition 적용하기
이렇게만 작성해도 dark모드가 구현되긴 하지만 자연스럽지 않고 뚝뚝 끊기면서 변경된다. 부드럽게dark와 light 모드 변경을 위해, transition을 넣어주자
1
2
3
4
/*global.css*/
body * {
@apply transition-colors duration-100;
}
📩마무리
Tailwind + localStorage 조합을 이용해 보다 사용자 맞춤형 디자인을 제공할 수 있었다.🥰 이제 스켈레톤 UI만 적용하면 프로젝트도 정말 마무리다!