window.matchMedia

window.matchMedia(mediaQueryString) 메서드는 미디어쿼리 문자열의 분석결과를 나타내는 MediaQueryList 객체를 반환한다.

객체는 media,matches,onchange 세 가지의 속성을 지닌다.

1. media
   matchMedia()의 parameter로 넣은 MediaQueryString이다.
2. matches
   boolean 값으로 MediaQueryString과 일치하면 true, 일치하지 않으면 false값을 지닌다.
3. onchange
   해당 미디어 쿼리가 변화할 경우 실행될 이벤트이다.

   let mediaQueryList = window.matchMedia(mediaQueryString);
   mediaQueryList.addListener((e) => {});
   //mediaQueryList.onchange=(e)=>{};

아래의 코드는 prefers-color-scheme속성이 dark인지 확인하는 코드이다.

window.matchMedia("(prefers-color-scheme:light:dark)");

const result = {
  media: "(prefers-color-scheme: dark)",
  matches: false,
  onchange: null,
};

ref

MediaQueryList.addListener()
MediaQueryList
prefers-color-scheme