Dark Mode / Light Mode 구현 하기

CSS와 JavaScript로 다크 모드, 라이트 모드 전환을 구현해보았다. 

 

토글 체크박스 클릭 시 아이콘이 바뀜과 동시에 모드가 바뀌도록 구현했다.

 

우선 Light Mode, Dark Mode에 쓰일 css 변수부터 지정해줬다.

LightMode에 사용될 css 변수

DarkMode에 사용될 css 변수

그리고 토글 체크박스을 하나 생성 후 css를 입혀준다.

 

toggle css(반응형은 아직 구현이 안된 상태라 사이즈는 px이다)

transform과 transition을 사용해 토글 박스 체크시, 아이콘이 0.5초 동안 32px 움직이도록 했다.

 

Icon은 Material-icon을 사용했기 때문에 아래의 자바스크립트 코드처럼 .html을 사용해 텍스트를 변경해주었다!

(아주 손쉽게 아이콘이 변경된다.)

 

 

이제 CSS와 토글 체크박스는 완성이 되었다. 자바스크립트만 작성해주면 끝이 난다.

 

테마 변경 자바스크립트 함수

 

체크 박스가 작동됬을 때, 바디에 다크모드 클래스가 없다면 다크모드를 추가해주고 다크모드가 있다면 다크모드 클래스를 제거해주는 코드이다. 

 

29번라인의 localStorage는 브라우저에 값을 저장해주는 저장소인데, localStorage를 사용하지 않고 구현을 하게 된다면 다크모드로 전환 후 창을 새로고침 할 시에 다크모드가 풀려버리는 이슈가 생긴다. 그렇기 때문에 현재의 모드를 localStorage에 저장해줘서 현재 모드가 어떤 모드인지 판단을 해주는 것이다. 

 

코드는 아래와 같다.

 

localStorage의 저장된 모드 확인 후 행동하는 코드

 

 

 

---

참고자료

https://swimfm.tistory.com/entry/JAVASCRIPT-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%EC%97%90-%ED%86%A0%EA%B8%80%EB%A1%9C-%EB%8B%A4%ED%81%AC%EB%AA%A8%EB%93%9C%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B3%BC-%EC%98%88%EC%A0%9C

[JAVASCRIPT] 웹사이트에 토글로 다크모드를 적용하는 방법과 예제

https://www.youtube.com/watch?v=BOF79TAIkYQ