Next 프로젝트에 다크모드를 적용해보자

포트폴리오를 위한 Next 프로젝트에 다크모드를 적용해보았다.

 

그래서 내가 했던 과정을 기록할 겸, 정리해보려 한다!

다크모드는 이미 구글에 자료가 넘쳐난다ㅎㅎㅎ

 

 

1. Tailwind CSS를 사용하자

Next는 기본적으로 Tailwind CSS 친화적이다.

그런 Tailwind에서 다크모드 기능을 제공한다.

https://tailwindcss.com/docs/dark-mode

Dark Mode - Tailwind CSS

해당 링크에 잘 정리되어 있는데, 간단히 설명하자면,

 

기본 로직은 간단하다. 개발자인 내가 html태그 클래스에 dark를 넣거나 빼면 된다.

이 로직은 위 링크에도 포함되어 있다.

이 코드는 페이지가 렌더 되고나서, 브라우저 세팅이 dark mode인지 그 여부를 검사하는 코드이다.

(이 코드는 뒤에서도 관련된 내용이 나온다. 기억해두자)

 

document.documentElement.classList.add('dark') 해당 코드가 html 태그 class에 'dark'를 주입시키는데,

이 로직을 스위치 컴포넌트에도 주입하면 된다.

 

html 태그 class 속성에 dark값이 주입되면,

css를 위해, 컴포넌트 classname에 준 dark: prefix가 붙은 친구들이 적용된다.

너무 편하다.

 

※ 참고로, Tailwind를 사용해서 다크모드를 구현하기 위해,

tailwind.config.js 파일에 아래와 같이 설정되어 있어야 한다.

 

2. 다크모드 스위치 아이콘은, 'react-toggle-dark-mode'

 

다크모드를 지원하는 npm 라이브러리 중에 평가가 좋아서 골랐다.

기본 애니메이션은 라이브러리가 지원해주고, 내가 크기와 색상을 지정할 수 있다. 아주 간단하다.

 

해당 링크에서 확인 가능하다.

https://www.npmjs.com/package/react-toggle-dark-mode

react-toggle-dark-mode

 

 

3. 감지가 먼저 되게하자

사용자가 우리의 페이지에서 dark mode로 설정하고 페이지를 나가게 되더라도,

localStorage에 값이 저장되어 있어, 다시 방문해도 dark mode가 설정된다. 

뿐만 아니라, 브라우저의 테마가 dark인 경우에도 우리의 페이지는 그 값을 먼저 조회해서 바로 어두운 화면을 보여준다.

 

문제는,

다른 설정이 없다면 사용자는 아주 잠깐 light mode를 경험할 수 밖에 없다.

우리의 감지 로직이 렌더 이후에 작동되기 때문이다.

 

감사하게도, 해당 문제의 해결 방법은 이미 많은 자료가 있다:)

스크립트로  직접 주입해주면 된다:)

 

마지막으로, 

dark mode switch에 해당하는 화면 로직은 서버에서 미리 그릴 수 없다.

따라서 dark mode switch에 해당하는 페이지에 'use client'가 선언되어 있어야 한다.

 

---

 

로직 자체는 경험해보니 어렵지 않다.

다만, 스위치를 직접 커스터마이징하게 되면 어려울 것 같다:)