JavaScript에서 다크 모드 감지

Windows 및 macOS와 같은 운영 체제에서 다크 모드가 널리 채택됨에 따라 개발자에게는 방법이 필요합니다. 그에 따라 웹 애플리케이션을 조정합니다. 이 작업은 시스템이 선호하는 색 구성표를 기반으로 사용자 인터페이스와 스타일 요소를 동적으로 사용자 정의할 때 발생합니다.

한 가지 접근 방식은 CSS 미디어 쿼리를 사용하여 어두운 모드 기본 설정을 대상으로 하는 것입니다. 그러나 Stripe Elements API를 사용하여 생성된 요소와 같이 JavaScript 스타일의 요소를 처리할 때는 보다 포괄적인 솔루션이 필요합니다.

JavaScript에서 프로그래밍 방식으로 운영 체제의 색 구성표를 결정하려면 다음 기술을 활용하십시오.

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

로그인 후 복사

이 메서드는 브라우저가 window.matchMedia() API를 지원하는지 확인한 다음 미디어 쿼리를 사용하여 시스템이 선호하는 색 구성표가 어두운지 확인합니다.

색 구성표의 변경 사항을 모니터링하려면 기본 설정에 따라 다음 코드를 사용하세요.

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

로그인 후 복사

이 리스너 함수는 미디어 쿼리의 수정 사항을 모니터링하고 새로운 색 구성표를 나타내는 이벤트 개체를 제공합니다. 그런 다음 개발자는 현재 시스템 설정에 맞게 애플리케이션을 동적으로 업데이트할 수 있습니다.

이 기술을 구현하면 웹 애플리케이션이 다크 모드에 원활하게 적응하여 사용자에게 다양한 시스템 및 운영 조건에서 일관되고 시각적으로 매력적인 경험을 제공할 수 있습니다.

위 내용은 JavaScript에서 다크 모드를 감지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!