# 서론
요즘 대부분의 웹앱, 모바일웹이 다크모드를 지원한다. 배터리 절약, 안구 보호, 세련된 디자인 등을 이유로 많이 사용하는 것 같다. 나도 라이트 모든는 눈이 아파서 항상 다크 모드를 사용한다...이번에 그 다크 모드를 사이드 프로젝트에 적용해보고자 한다.
# 다크 모드 구현을 위해 필요한 것들
- Theme : light와 Dark에 필요한 color Property를 담는다.
- GlobalStyles : document 전체에 Theme 적용을 위한 값을 담는다.
- Toggle: Dark Mode on/Off하는 컴포넌트
- useDarkMode: DarkMode/LightMode 전환하하고 localStorage에 값을 담는 custom Hook
# 코드
먼저 styles.d.ts를 만들어서 DefaultTheme에 대한 type을 정의한다. d.ts는 전역 변수나 전역 함수를 import없이 사용하는 경우, typescript가 인식을 하지 못하기 때문에 전역적으로 관리할 값에 대해 type을 선언해주어, tyescript의 타입 추론을 도와주는 선언 파일이다.
정의한 타입에 맞게 lightTheme와 darkTheme를 정의해준다.(Theme.ts)
createGlobalStyle의 props로 theme를 전달 할 수 있다. createGlobalStyle은 React 컴포넌트를 생성하고, 이 컴포넌트를 컴포넌트 트리에 추가하면 전역 스타일을 Document에 주입한다.
App.tsx에 ThemeProvider를 추가하고, 그 안에 GlobalStyle도 추가해준다.
ThemeProvider는 Context API를 사용해 모든 자식 컴포넌트에 theme를 주입한다.
Dark모드로 전환시켜주는 기능은 완성됐다. 인제 Toggle기능을 컴포넌트로 만들어서 분리해주면 될 것 같다.
WEB