JavaScript에서 다크 모드를 어떻게 감지할 수 있습니까?

JavaScript에서 다크 모드 감지

Windows 및 macOS와 같은 많은 최신 운영 체제는 사용자 경험을 향상하고 저조도 설정에서 눈의 피로를 줄이기 위한 옵션으로 다크 모드를 제공합니다. . 개발자로서 원활한 사용자 경험을 제공하기 위해 사용자 운영 체제의 선호하는 색 구성표를 감지할 수 있다는 것은 유익합니다.

다크 모드용 CSS 미디어 쿼리

CSS의 경우 @ 미디어(어두운 인터페이스 선호) 미디어 쿼리를 사용하면 특히 다크 모드에 스타일을 적용할 수 있습니다. 그러나 스타일링을 위해 JavaScript를 활용하는 Stripe Elements와 같은 API를 사용하는 경우에는 다른 접근 방식이 필요합니다.

JavaScript 솔루션

JavaScript에서 운영 체제가 선호하는 색 구성표를 결정하려면 다음을 사용할 수 있습니다. code:

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

이 코드는 window.matchMedia() API를 활용하여 사용자의 브라우저가 미디어 쿼리를 지원하는지와 '(prefers-color-scheme: dark)' 미디어 쿼리가 일치하는지 확인합니다. 쿼리가 일치하면 사용자가 운영 체제에서 다크 모드를 활성화했음을 나타냅니다.

색 구성표 변경 모니터링

사용자의 색 구성표 기본 설정 변경에 응답해야 하는 경우 addEventListener() 메서드를 사용하여 미디어 쿼리에서 이벤트를 수신할 수 있습니다. 다음 코드는 색 구성표가 변경될 때마다 콜백 함수를 트리거하는 이벤트 리스너를 추가합니다.

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
  const newColorScheme = event.matches ? "dark" : "light";
  // Perform necessary actions based on the new color scheme
});

이러한 기술을 활용하면 사용자가 선호하는 색 구성표를 효과적으로 감지하고 응답하여 일관되고 밝은 모드 또는 어두운 모드 사용 여부에 관계없이 최적화된 사용자 경험.

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