CSS, Javascript에서 다크모드 체크하기

juunini·2020년 9월 1일
0

가끔 특정 페이지들에 접근했을 때 내 PC가 다크모드인걸 인식하고 다크모드를 적용해주는 곳들이 있어 신기해서 찾아보았다.

CSS

@media (prefers-dark-interface) { 
  color: white; background: black 
}

Javascript

if (
  window.matchMedia && 
  window.matchMedia(
    '(prefers-color-scheme: dark)'
  ).matches
) {
  // your code
}

CSS에도 있지만, 나는 왠지 CSS쪽 보다는 javascript의 기능에 관심이 더 갔다.
다크모드와 라이트모드를 왔다갔다 하려면 javascript를 이용해 body태그에 darkmode 클래스 같은걸 필요에따라 넣거나 빼는 기능이 필요하다고 생각되기 때문이다.

profile
지상 최강의 개발자 쥬니니

0개의 댓글