[Css] 미디어 쿼리 (dark & light 모드)

prefers-color-scheme

prefers-color-scheme 미디어 쿼리를 사용하면 운영 체제에서 설정된 라이트/다크 모드를 실시간으로 감지하여 최적화된 스타일을 적용할 수 있습니다!

Window.matchMedia()

window.matchMedia(mediaQueryString)

window.matchMedia : 미디어 쿼리 문자열의 분석 결과를 나타내는 MediaQueryList 객체를 반환합니다.
mediaQueryString : 분석할 미디어 쿼리를 나타내는 문자열.

if (window.matchMedia("(min-width: 400px)").matches) {
  /* 뷰포트 너비가 400 픽셀 이상 */
} else {
  /* 뷰포트 너비가 400 픽셀 미만 */
}

export const isLightState = atom<boolean>({
  key: "isLight",
  // 설정값에따라 다크&라이트 모드 설정
  default: window.matchMedia("(prefers-color-scheme:light)").matches
    ? true
    : false,
});

matches : MediaQueryList 객체의 속성으로, 대상 미디어 쿼리가 현재 뷰포트에서 일치하는지 여부를 불리언 값으로 반환합니다.

let mediaQueryList = window.matchMedia("(min-width: 600px)");
console.log(mediaQueryList.matches); // true 또는 false