mov를 gif로 변경하였더니 화면이 이상해지네요..ㅠ🙄
부트캠프 메인프로젝트에서 제가 담당했던 다크모드를 회고 해보려고 합니다.
저는 처음부터 다크모드를 만들자고 생각했을때 테일윈드를 써야겠다고 생각했으며 메인 프로젝트에서도 테일윈드를 적용하였습니다.
1.테일윈드 세팅
tailwindcss 를 통하여 다크모드를 사용하려면 tailwind.config.js 파일에 darkMode:'class' 를 추가설정 해주셔야 합니다.
2.darkMode 로직
로컬스토리지에 dark 가 있다면 클래스가 dark인것들을 없애고 로컬스토리지에 없다면 dark 클래스를 넣는 방식입니다. 로컬스토리지를 사용한 이유는 유저가 다크모드를 활성화 한후 새로고침이라던지 브라우저를 끄고 다시 방문했을때 그대로 다크모드가 유지되기 위함입니다.
3.darkMode on/off 를위한 토글만들기
토글 On/Off 를 위한 state및 함수
토글 버튼 스타일링 입니다 이부분은 각자 만드신 컴포넌트및 스타일에 따라 얼마든지 달라질수 있을것 같습니다.
각각의 스타일컴포넌트에 isOn을 props로 전달하여 토글이 움직이고 다크모드에 따라 색도 변하게 해줍니다.
4.다크모드 컴포넌트에 적용하기
웹 전역에 공통적으로 적용될 색은 루트컴포넌트인 App에서 설정을 해주었습니다.
공통적으로 적용될색이 아니고 컴포넌트마다 다크모드일떄 다른색으로 변경하고싶다면 해당컴포넌트에서 dark:bg-[원하는색] 이런방식으로 설정해주시면 됩니다.
처음 만들어보는것이라 많이 서투른 다크모드였습니다.
개선할점이나 잘못된부분을 지적해주시면 수정하도록 하겠습니다!
