2021/10/18 : 댓글 서비스에 다크모드 구현!

 

 

 

 

 

 

어느 웹사이트에서나 사용가능한 댓글 서비스 다라쓰에 곧 다크모드가 추가될 예정입니다.

기본적인 UI위치나 로직들을 구현했고, 배겐드 서버에 저장없이 돌아갈 수 있도록 구상하고 있습니다.

 

다크모드를 구현하기 위해서 사용하고 있던 styled-component의 ThemeProvider를 사용하여, 삽입된 페이지가 다크모드인지 여부를 boolean값으로 쏴주었고,

다크모드일때 읽기 어려운 값들에 대해서 분기를 쳐주었습니다.

 

토글버튼도 만들었습니다.

svg부분빼고 100% 수제 컴포넌트입니다! 예쁘지않나용? 그리고 원래라면 팀원과 했을텐데.. 혼자라도 잘해내는 나를 보니 뿌듯합니다.

 

또한, 구현하면서

filter: invert(100%);

css 속성을 사용하면, 이미지를 반전시킬 수 있다는 사실을 깨달았습니다!

다크모드를 할때 반전시킬대 아주 유용한것 같습니다. 👍. 하마터면 색깔만 반전되어있는 새로운 이미지를 구해야할뻔...

 

아무튼 덕분에, 다크모드 기능은 구현이완료되었고, 어떻게 삽입된 댓글을 서버에 저장하지 않고 상태를 유지시킬 수 있을지에 대한 고민을 내일 마저이어서 기능을 완료해야겠습니다.

 

 

 

https://github.com/woowacourse-teams/2021-darass/commit/5027383f058c2ef768ca1706a53a344a7c1b5fe7

feat: dark mode 테마 추가 · woowacourse-teams/2021-darass@5027383

https://github.com/woowacourse-teams/2021-darass/commit/e8eb990025f69934e176bdf15afb6d920452b550

feat: 다크 모드 토글 버튼 추가 · woowacourse-teams/2021-darass@e8eb990