다크모드 감지해서 적용하는 법

[https://fe-developers.kakaoent.com/2021/211118-dark-mode/] 이 블로그 참조

미디어 쿼리 사용의 단점

보통 미디어 쿼리를 사용해서 다크모드 감지 -> 그에 따라 css 값 변경하는 식으로 쓰는데

• 낮은 버전에서는 안먹힘
• 자체적인 컬러모드를 가져갈 수 없음

JS 코드로 다크모드 감지하기

window.matchMedia("(prefers-color-scheme: dark)").matches
사실 css랑 똑같은거긴 한데..다크모드를 사용한다면 true / 아니면 false를 반환함
이 값을 이용해서 html 속성값을 변경 - 그에 따른 css 변경

css :root

만약에 다크모드 사용 - body에 'dark' class명을 추가해서 화면 색상을 변경시키려면

• 일단 기본으로 사용하던 body의 색상이 있고, 여기에 또 `body.dark` 라는 css 속성을 추가해야됨
• 무조건 두개의 css를 선언해야 되는데, css 변수를 사용하면 한번에 해결할 수 있음
• :root[color-mode="dark"] { --background: #000; --textColor: white; }
• body { background-color: var(--background); color: var(--textColor); }
• root 선택자는 html 선택자와 똑같지만 , html보다 더 우선으로 적용됨 - 그래서 보통 css 변수 선언할때 사용
• 복잡한 웹사이트는 어마어마한 양의 CSS를 가지고 있는데, 종종 많은 값을 반복적으로 사용합니다. 예를 들어, 수 백 곳의 서로 다른 위치에서 같은 색상을 사용한다면, 그 색을 바꿔야 할 상황이 왔을 때 대규모 전역 검색 바꾸기를 피할 수 없습니다. 사용자 지정 속성을 사용하면 한 영역에 값을 저장해놓고 다른 여러 곳에서 참조해갈 수 있습니다. 추가로 오는 장점은 의미를 가지는 식별자를 사용한다는 것으로, #00ff00보다는 --main-text-color가 이해하기 쉽다는 것입니다. 특히 같은 색을 다른 맥락에서 사용할 때 이 장점이 도드라집니다(by mdn)
• ex) 네이버에서 특정 날에는 초록색을 다른 색으로 변경할 때가 있는데, 만약에 이때 변수 설정 안해놓으면 ? 하나하나 다 바꿔야 됨
• 이 코드에서는 root(html)의 attribute 중 color-mode가 'dark'일 때, 해당 변수를 설정함
• var 키워드를 사용해 (root에서 설정해놓은 변수,앞의 변수가 적용 안될 때 쓰는 값) 이렇게 사용 가능

그럼 이제 다크모드 사용을 감지해서 html에 color-mode = dark 라는 속성을 추가해주거나
버튼을 누르면 속성을 바꿔주는 토글 버튼같은걸 만들어서 다크모드를 on/off할 수 있음

setColorMode(condition) {
    document.documentElement.setAttribute(
      "color-mode",
      condition ? "dark" : "normal"
    );
  }

이런 함수를 이용해서 해당 상태에 따라 어떤 값을 추가할지 정해주면 됨