[MapleInfo] 다크모드

다크 / 라이트 모드

예전부터 적용해보고 싶었던 모드였는데, 생각보다 적용하기 수월해서 오랜 시간이 걸리진 않았었다.

Redux와 tailwind, custom Hook을 이용해 만들었다.

우선 dark 모드를 사용하기 위해 tailwind.config.js에 darkMode를 추가해 주었다.

 

tailwind

간단하게 module.exports에 darkMode: "class"만 넣어주면 된다.

사용법은 다크모드의 경우 'dark:'뒤에 원하는 style을 넣어주기만 하면 된다. 'dark:'가 없을 경우, light모드일 때 적용 된다.

 

Redux

리덕스의 경우에도 toolkit 덕분에 쉽게 해결할 수 있었다.

index.tsx

가장 상위 컴포넌트인 index.tsx에 Provider로 감 싸준 뒤, store를 넣어준다.

modules/darkSlice.ts

 

 - isDark를 통해 true일 경우 다크모드, false일 경우 라이트모드로 구분하도록 했다.

 - initialState : isDark에서 로컬 스토리지를 이용하여 다크모드의 여부를 기억하도록 했고, 사용자가 운영체제의 어두운 테마를 사용하는지 여부를 확인함으로써 사용자가 어두운 테마를 사용하고 있다면, 'isDark'는 true가 되도록 설정했다.

- darkSlice : action으로는 로컬스토리지의 'theme' key가 'dark'인지, 'light'인지로 변경하도록 하고, isDark는 그에 따라 'true', 'false'로 변경하도록 했다.

 

modules/index.ts

 

- store에 reducer를 저장을 함으로써 사용할 준비는 끝!

 

custom Hook

hooks/useDarkMode.ts

- useSelector를 이용해 isDark reducer를 불러오고, dispatch를 이용해 isDark의 값을 바꾼다.

- useEffect를 이용해 해당 html의 class를 변경해 준다.

다크모드

라이트 모드

- onToggleDarkMode를 이용해서 다크 / 라이트 모드 버튼을 눌렀을 때, isDark를 true / false로 바꾸도록 했다.

 

Header.tsx

- 사용할 곳에 useEffect로 "dark"를 넣었다가 뺐다가 해줘야 tailwind에 제대로 적용이 된다.

 

다크모드 완성!