웹에서 시스템 테마 변경 감지

date

Feb 24, 2023

thumbnail

gsc

Done

public

slug

detect-change-system-theme

author

window.matchMedia()

window.matchMedia() 함수는 일치하는 속성을 가진 객체를 반환하는 함수이다. 미디어 쿼리는 미디어 타입과 특정 조건을 통해 미디어의 속성을 지정하는 방법이다. 예를 들어, '(min-width: 600px)' 미디어 쿼리는 화면 너비가 600px 이상일 때 참이 되는 조건이다. window.matchMedia() 함수는 이러한 미디어 쿼리를 입력받아 해당 쿼리를 대상으로 하는 element객체를 반환한다.

시스템 테마 변경 이벤트

시스템 테마를 변경할 때 발생하는 이벤트는 window.matchMedia() 함수를 사용하여 감지할 수 있다.

다음은 시스템 테마 변경 이벤트를 감지하는 코드이다.


window.matchMedia('(prefers-color-scheme: dark)').addListener('change', (e) => {
  if (e.matches) {
    // 시스템 테마가 다크 모드일 때의 처리
  } else {
    // 시스템 테마가 라이트 모드일 때의 처리
  }
});

위 코드에서는 window.matchMedia 함수를 사용하여 '(prefers-color-scheme: dark)' 와 시스템 테마가 일치하는지 확인한다. 다크모드일 때 참이 되는 조건이다.

생성된 wndow.matchMedia() 함수에 addListener 메소드를 사용하여 시스템 테마 변경 이벤트를 감지한다. e.matches 속성은 현재 시스템 테마가 일치하는지 여부를 나타낸다.

마무리

시스템 테마 변경 이벤트를 감지하여 웹 애플리케이션의 테마를 적용하는 기능은 사용자 경험을 향상 시키는데 중요한 역할을 한다. wndow.matchMedia() 함수와 addListener 메소드를 사용하여 간단하게 구현할 수 있다.

참고

MDN web docs

W3Schools

CSS-Tricks

아래로 당겨서 새로고침

웹에서 시스템 테마 변경 감지

window.matchMedia()

시스템 테마 변경 이벤트

마무리