사람은 살면서 분명 이거 어려울 것 같은데 하고 나면 간지나서 하고 싶다는 생각이 드는 순간이 올거라 생각합니다. 저는 다크모드가 그랬는데요. 뭔가 버튼 하나로 전체 테마가 변경 된 다는 게 간지 포인트라는 생각이 들어 시작하게 되었습니다. 그런데 문제는 그래서 어떻게 하지? 라는 생각이 들었습니다.
일단 다크모드들이 어떻게 진행되는지 보기위해 자주 사용하는 사이트들을 살펴보게 되었습니다. 벨로그부터, 네이버 등등 하지만 결론적으로는 버튼하나로 진행된다! 하나의 사실은 동일했습니다.
다크 모드를 사용하기에 앞서, 일단 다크 모드로 변경시켜 줄 버튼이 필요할 것 같아 버튼 컴포넌트를 만들게 되었습니다.
다크모드가 아닐 경우의 버튼
다크모드 일 때의 버튼
위 버튼의 경우에는, 원모양의 버튼을 누를 경우 그리고, 버튼을 감싸고 있는 박스를 누를 경우 모두 변경이 되도록 해주었습니다.
theme을 적용하기 위해 고민을 하다 보니, 결국 컴포넌트 간에 계속해서 theme을 공유해야 하는 상황이 되었습니다. 처음에는 context도 고민을 했지만 생각해보니 저는 ThemeProvider을 이용하는 사람이었던 것이에요. 그래서 아래와 같은 초기 값을 만들어 주었습니다