다크모드인지 확인해보자

prefers-color-scheme ?

사용자 시스템이 다크모드인지 판단하기 위해 미디어쿼리로 사용된다.

@media (prefers-color-scheme: dark) {}
@media (prefers-color-scheme: light) {}

Window.matchMedia() ?

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

// 다크모드 일 경우
const mode = window.matchMedia('prefers-color-scheme: light')

이 경우 mode에는 object형태로 미디어 쿼리에 대한 리스트 객체가 할당되고,
쿼리에 대한 true / false값을 얻으려면 mode.matches를 통해 얻을 수 있다.