[전국재난톡 개발노트] Tailwind CSS + Next.js 프로젝트에서 다크모드 꾸미기

사용 기술 스택
Tailwind CSS, Next.js 13

나는 프로젝트에 다음과 같이 아래 첫번째 사진을 두번째 사진처럼 다크모드일 때의 스타일도 추가해줬다.

다크모드로 설정하고 작업하려면

1. tailwind.config.js에서 darkMode:"class" 추가
   

2. layout.tsx에서 클래스 이름에 "dark" 추가하기
   

이렇게 하면 다크모드로 고정한 상태로 개발할 수 있다.
(개발 후에는 제거했다.)

Tailwind CSS로 다크 모드 스타일 꾸미기

위와 같이 앞에 dark:만 추가하면 다크모드에서의 스타일을 꾸밀 수 있다.

다크 모드일 때, svg 이미지 색상반전 하는 법

svg 이미지인 경우 className="dark:invert"만 추가해주면 색상 반전이 된다!

참고 자료
https://tailwindcss.com/docs/dark-mode