리액트 프로젝트에 다크모드 적용하기
css와 js만 이용해서 적용해보았다.
프로젝트 초중반에 나왔던 아이디어 중에 다크모드가 있었다.
기능 구현에 항상 후순위로 밀렸던 기능이라 이제야 구현하게 되었다.
다크모드는 요즘 많은 서비스에서 제공하고 있다.
우리가 참고한 사이트는 velog였는데,
이렇게 해더의 해(달) 버튼을 클릭하면 모드가 전환되었다.
벨로그에서는 body태그의 속성으로 제어하고 있었다.
프로젝트를 감싸고 있는 가장 최상단 태그에서 속성을 통해 css를 각각 적용하는 것이다.
우선 이것을 이해하려면 css에서 두가지 개념을 알고 있어야한다.
1. 속성 선택자
2. 변수 사용
1. 속성 선택자
태그 대신 class명이나 id로 선택할 수 있는 것은 모두 다 알고 있을 것이다.
속성 선택자는 말 그대로 속성에 따라 선택할 수 있는 것이다.
예를 들어 div[class =~ 'text] 라는 선택자가 있다면
div태그 중에서 text라는 단어가 포함된 클래스 명을 가진 태그를 선택하겠다는 의미이다.
class대신에 어떤 속성이던 들어갈 수 있다.
벨로그에서는 이렇게 사용했다.
data-theme라는 속성값이 'dark' 일 때 아래와 같은 스타일을 적용하겠다는 의미다.
2. 변수(=사용자 지정 CSS 속성) 사용 가능
css에서는 변수를 사용할 수 있다. 변수명 앞에 '--'를 붙이면 된다.
기본적으로는 :root { } 안에 선언하여 전역으로 사용할 수 있고,
선택자 안에 사용해서 스코프(영역)을 제한할 수도 있다.
사용할 때는 var를 이용하여 아래처럼 참조하면 된다.
그래서 어떻게 구현을 했냐면
1. 최초의 값은 'light'로 설정
: 나는 모드 값을 여기저기서 사용해야했기 때문에 useContext를 이용하여 전역에서 관리했다.
로컬스토리지에 값이 있는지 체크하고 없으면 그냥 빈값(light) 세팅
2. 한번이라도 토글 버튼을 누르면, 브라우저의 localStorage에 저장 됨
3. 토글버튼 클릭 이벤트 생성
: 클릭할 때마다 html 태그에 class이름을 변경해준다. (dark or light)
: 리액트에서는 dom을 직접 접근하는 것을 추천하지 않지만,
이미 프로젝트의 막바지이고 데드라인이 정해진 상태였기 때문에 시간의 여유가 없었다.
4. css 변수 정의
: 전역에서 쓸 수 있는 줄은 글을 쓰며 알았는데, js파일에서도 접근이 가능해서 놀랐다.
