블로그 다크모드 기능 추가하기 ( next.js )

이번에는 Next.js 블로그에 다크모드 기능을 추가하는 방법을 단계별로 알아보겠습니다.

다크모드는 사용자 경험을 향상시키고, 눈의 피로를 줄이는 데 도움이 되어, 블로그를 방문하다보면 거의 필수로 존재하는 옵션입니다.

1) 개발하게 된 이유

개발자들은 종종 웹 관련 검색을 하거나 개인 블로그에 접속하는 경우가 많습니다.

최근 많은 블로그에서 다크모드 기능을 제공하는 것을 보고, 저도 제 블로그에 다크모드 기능을 추가해 보기로 했습니다.

밋밋했던 블로그가 얼추 블로그처럼 변해가고 있는 것 같아서 뿌듯합니다.

먼저 기본값의 블로그의 화면입니다.

블로그사진

다크모드 ON/OFF 버튼을 헤더에 추가하고, 이 버튼을 클릭할 때마다 화면의 테마가 변경되도록 합니다.

모든 CSS 파일을 검토하여 background-color와 color 속성을 globals.css로 이동시키고, 공통 색상을 처리합니다.

버튼을 조작하면서 다크모드 on/off가 될 때 페이지가 다시 로드되었을 때도 다크모드 설정을 유지하기 위해 로컬 스토리지에 다크모드 여부를 저장하고 읽어오도록 처리하였습니다.

먼저 css파일을 보면

body태그와 body.dark-mode 태그에 각각 다크모드가 처리 됐을때 아래와 같이 설정된 css를 읽어오게 하면 됩니다.

globals.css 소스 )

그럼 버튼을 눌렀을 때 위 css를 읽을 수 있도록 처리해 보겠습니다.

먼저 헤더 부분에 다크모드를 표시할 해/달 모양을 추가 했습니다.

해당 아이콘을 클릭했을 때 호출되는 메소드 입니다.

로컬세션에 다크모드 여부를 저장 및 body css를 변경해 줍니다.

그리고 화면이 열릴 때 로컬세션에 저장된 theme 값을 가져옵니다.

위에서 가져온 값으로 다크모드 처리를 해주면 끝납니다.

다음과 같이 다크모드 기능이 잘 작동하는 것을 확인할 수 있습니다.

블로그사진

이렇게 해서 Next.js 블로그에 다크모드 기능을 성공적으로 추가할 수 있습니다.

작업하시다가 궁금하신 점 있다면 댓글 남겨주세요.

읽어주셔서 감사합니다. 😊