이전에는…
이전에 Next.js 환경에서 다크모드를 styled component 의 공식문서에서 제공하는 방식으로 진행을 했는데 새로 고침시 다크 모드임에도 흰색 배경이 잠깐 보였다가 다크모드가 적용 되는 이슈가 발생하였다.
그래서 data attribute 와 css 의 변수를 통해서 리팩토링 해보려고 한다.
과정
먼저 제일 핵심이 되는
useTheme() custom hook 을 변경해준다.이전 포스팅에서 작성하였던 기존의
useTheme() 에서 테마를 변경하는 함수인 changeTheme() 에 html 태그에 데이터 속성 data-theme 를 추가해주는 코드를 추가해주었다.그 다음 them 의 초기값을 설정해주기 위해 _document.tsx 에 코드를 추가해준다.
next/script 의 Script 태그를 import 한 뒤, 테마를 초기화 시켜주는 자바스크립트 코드를 dangerouslySetInnerHTML 를 통해 적용해주고 페이지가 표시되기 전에 테마를 초기화 해주기 위해 strategy 값을 beforeInteractive 로 적용해주었다.그리고 css 의 속성 선택자를 통해
useTheme() 에서 설정한 data-theme 의 값에 따라 사용할 변수를 설정해준다.스타일을 사용하는 css 또는 scss 코드에 색상 변수를 지정시켜준다.
styled-components 공식문서에 있는 ThemeProvider 를 사용하는것이 당연한 방법이라고 생각했는데 다른 방법으로 진행해보니 공식 문서보다 더 나은 방법이 있으면 그 방법으로도 적용해보는 것도 좋은 경험이 될 것 같다는 생각이 들었다.
참고
