Next.js + Emotion 다크모드 구현체

설명

Next.js와 Emotion으로 구현한 다크모드 입니다. 구현사항은 다음과 같습니다.

• 시스템 선호도에 따라 사이트 내 테마 변경
• 버튼을 클릭하여 테마 변경
• 테마 변경 시 로컬스토리지에 지정한 테마값을 저장
• 새로고침 시 깜빡임 없음

개선작업 전후 비교

깜빡임 개선 전	깜빡임 개선 후

개발 환경

• Next.js v13.0.6
• Typescirpt v4.9.4
• React v18.2.0
• Node v17.3.1

관련 블로그 자료