다크모드를 구현하기 위한 과정은 다음과 같다.
- window.matchMedia("(prefers-color-scheme: dark)").matches를 통해 os에서 다크모드를 설정했는지 여부를 체크
- 체크여부를 토대로 컴포넌트를 초기화(다크모드가 초기상태면 다크모드로 랜더링)
- 트리거를 통해 state를 변경
- state를 css에 반영
구현은 VanillaJS로 구현하였다.
다크모드를 감지하고 Toggle에 props로 넘겨주기
우선 상위 컴포넌트App과 토글기능을 구현할 DarkModeToggle 컴포넌트를 선언
isDarkMode 값을 window.matchMedia를 통해 가져오고 toggle 컴포넌트에 넘겨준다.
토글컴포넌트 작성
토글 트리거는 간단하게 checkBox로 구현하였다.
초기 isDarkMode 값은 App컴포넌트에서 initMode로 받아오고
initMode가 true, 즉 OS에서 다크모드일때는 initColorMode()를 통해
checkBox를 체크된 상태로 바꾼다.
토글컴포넌트 기능구현
기능구현은 HTML의 color-mode를 light와 dark로 바꾸는 것으로 구현한다.
color-mode를 바꾸는 isDarkMode를 인자로 받는 setColorMode()를 만들고
컴포넌트 초기화시와 checkBox의 change이벤트가 일어날때 실행될 수 있도록 넣는다.
App컴포넌트의 state를 바꾼다
App컴포넌트에 isDarkMode state를 바꿔줄 수 있는 함수를 DarkModeToggle 컴포넌트로 넘겨주고 change이벤트가 발생할시 실행시켜줄 수 있도록 한다.
css에서 다크모드를 감지하고 스타일링
:root를 이용하여 colorMode에 따라서 var 변수를 다르게 변경한다.
간단하게 backgroundColor 와 color를 서로 바꾸는 css를 작성해보았다.