JavaScript에서 다크 모드를 어떻게 감지할 수 있나요?

JavaScript에서 다크 모드 감지

Windows 및 macOS에 다크 모드가 도입되면서 개발자는 CSS 및 JavaScript 스타일을 적용해야 하는 과제에 직면하게 되었습니다. 사용자가 선호하는 색상 구성표와 일치하도록 합니다. 이 질문은 반응형 색 구성표 조정을 허용하여 JavaScript에서 다크 모드를 감지하는 방법을 탐구합니다.

미디어 쿼리 접근 방식

CSS의 경우 미디어 쿼리는 간단한 솔루션을 제공합니다.

@media (prefers-dark-interface) {
  color: white; background: black 
}

JavaScript 감지

결제 요소를 생성하는 데 사용되는 Stripe Elements API에는 JavaScript의 색상 지정이 필요합니다. 이러한 맥락에서 다크 모드를 감지하려면 JavaScript API를 활용해야 합니다.

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

이 쿼리는 window.matchMedia API가 지원되는지 확인하고 미디어 쿼리 문자열을 평가합니다. true인 경우 시스템은 어두운 모드를 선호합니다.

색 구성표 변경 감시

색 구성표의 동적 변경을 처리하려면 변경 이벤트를 구독할 수 있습니다.

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

이를 통해 사용자 선호도에 따라 실시간 조정이 가능합니다.

위 내용은 JavaScript에서 다크 모드를 어떻게 감지할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!