오늘의 목표
✨ 다크 모드 버튼 만들기
✨ 다크 모드 적용되도록 컬러 세팅하기
✨ 다크 모드 적용하기!
다크모드를 만들고 싶은 이유
사람은 살면서 분명 이거 어려울 것 같은데 하고 나면 간지나서 하고 싶다는 생각이 드는 순간이 올거라 생각합니다. 저는 다크모드가 그랬는데요. 뭔가 버튼 하나로 전체 테마가 변경 된 다는 게 간지 포인트라는 생각이 들어 시작하게 되었습니다. 그런데 문제는 그래서 어떻게 하지? 라는 생각이 들었습니다.
버튼을 만들자!
일단 다크모드들이 어떻게 진행되는지 보기위해 자주 사용하는 사이트들을 살펴보게 되었습니다. 벨로그부터, 네이버 등등 하지만 결론적으로는 버튼하나로 진행된다! 하나의 사실은 동일했습니다.
다크 모드를 사용하기에 앞서, 일단 다크 모드로 변경시켜 줄 버튼이 필요할 것 같아 버튼 컴포넌트를 만들게 되었습니다.
다크모드가 아닐 경우의 버튼
다크모드 일 때의 버튼
위 버튼의 경우에는, 원모양의 버튼을 누를 경우 그리고, 버튼을 감싸고 있는 박스를 누를 경우 모두 변경이 되도록 해주었습니다.
theme을 적용 시켜 주자.
theme을 적용하기 위해 고민을 하다 보니, 결국 컴포넌트 간에 계속해서 theme을 공유해야 하는 상황이 되었습니다. 처음에는 context도 고민을 했지만 생각해보니 저는 ThemeProvider을 이용하는 사람이었던 것이에요. 그래서 아래와 같은 초기 값을 만들어 주었습니다
const [themeMode, setThemeMode] = useState("light");
const theme = themeMode === "light" ? light : dark;
const handleMode = (e) => {
const { id } = e.target;
setThemeMode(id !== "light" ? "light" : "dark");
};기본 theme 값을 설정 해주고, theme을 버튼의 id 값에 따라서 달라지도록 진행해 주었습니다.
초기 버튼의 모습
버튼의 id 값과 연결을 해준 이유는 버튼의 id 값에 따라 버튼의 색이나, 위치가 변경 되도록 진행해 주었기 때문입니다. 그래서 만약 버튼의 id가 light의 경우에는 left 값을 주어 버튼을 왼쪽으로 , 반대의 경우 오른쪽으로 이동 되도록 설정해 주었습니다
변경 확인
1차적으로는 위와같은 모습이 되었습니다. 그래요 사실 버튼만 보여드리고 싶었으나, 캡쳐하다 보니 이렇게 되어버렸어요. 젠장 들켰군요 하지만 어떻게요 그래도 뿌듯하니 봐주세요.
다크 모드를 위한 컬러 세팅
그런데 일단 변한 모습을 보았을 때, 몇 가지 개선점이 보였는데요, 개선점들은 아래와 같습니다
- 다크모드의 색이 마음에 들지 않습니다
- 네비게이션 바를 사이드에 두어도, 이후에 게시글 볼 때 불편하지 않을까
사실 1이 가장 문제라면 문제라 생각이 들어 일단. 다크 모드 팔레트를 검색하며 색을 수정해 보았습니다.
다크모드 1차 개션 결과
이리저리 색을 찾아본 결과. 이 색이 가장 귀여워 보여 이 색으로 선택하게 되었습니다. 그런데 보니 옆에 있던 바가 위로 올라가지 않았나요? 맞습니다. 결국 색을 변경하면서 위로 옮겨주었어요 .
그런데 헤더를 만들면서 몇 가지 퀴즈가 발생해주었는데요. 한번 살펴 볼까요?
오늘의 퀴즈
헤더에서 theme===’light’를 이용해 다크모드를 진행해 주려했으나 에러가 발생했습니다! 원인이 무엇이었을까요?
배경
원래는 한 곳에서 theme을 사용해 주다 보니 문제가 없었지만 ,header을 별개의 컴포넌트 파일로 분리 하면서 문제가 발생했습니다. light가 선언되지 않았다는 에러가 발생을 했는데요. 저는 당시에 theme에는 light가 있는데 왜지? 하는 생각이 들었습니다
시도
- 설마 하고 theme을 출력 해보았습니다.
- 그 다음에는 theme===’light’를 확인해 보았습니다. 그렇습니다. 사실상 일치 할 리가 없는 거였습니다
- theme 과 light는 일치할 수 있지만 문자열 light 는 애초에 존재하지 않았으니, 있을 리 없었습니다.
해결
그래서 결국은 light를 import해서 이용해주니 무사히 해결되었습니다🙂
오늘의 꼬리 질문
ThemeProvider과 ContextApi는 결국 유사한 것 같은데, 후자의 개념이 제대로 잡혀 있지 않으니 혼동이 오는 것 같은데. 후자가 정확히 뭔지 공부 해야 할 것 같은데🤔
