1. matchMedia ?!
mathMedia 메서드는 미디어쿼리 문자열을 분석하여 그 결과를 반환하는 메서드입니다.
분석할 수 있는 미디어쿼리의 종류로는 대표적으로 뷰포트의 너비를 의미하는 width , 출력장치의 픽셀 밀도를 의미하는 resolution 등이 있습니다.
그리고 사용자 시스템 테마를 확인하기 위해서는 prefers-color-scheme 미디어 쿼리를 사용합니다.
2. prefers-color-scheme 을 사용하여 사용자 테마 확인하기
prefers-color-scheme 미디어쿼리를 사용하여 사용자 테마를 확인하는 방법은 다음과 같습니다.
window.matchMedia("(prefers-color-scheme: light)").matches // true or false위 코드에서 window.matchMedia("(prefes-color-scheme: light)") 는 MediaQueryList 객체를 반환하고, 해당 객체의 matches 속성은 미디어쿼리의 분석 결과를 boolean 타입으로 표시해줍니다.
따라서 matches 의 결과를 통해 사용자 설정 테마가 라이트(light) 테마인지 다크(dark) 테마인지 확인할 수 있죠.
지금까지 matchMedia 와 prefers-color-scheme 을 활용하여 사용자 설정 테마를 확인하는 방법에 대해서 알아보았습니다! 😉
감사합니다.
