Js에서 사용자가 다크 모드에 있는지 감지하는 방법

소개

웹사이트가 귀하의 선호도에 따라 밝은 모드와 어두운 모드 사이를 원활하게 전환하는 방법을 궁금해하신 적이 있습니까? 그것은 마술이 아닙니다. 현대 웹 기술을 영리하게 사용하는 것입니다. 이 게시물에서는 사용자가 어두운 모드를 선호하는지 여부를 감지하는 간단하면서도 강력한 기술과 이 정보를 사용하여 웹 사이트에서 사용자 경험을 향상시킬 수 있는 방법을 공개하겠습니다.

다크 모드 감지 이해

다크 모드의 인기로 인해 이제 많은 웹사이트와 애플리케이션이 사용자의 시스템 기본 설정에 맞는 테마를 제공합니다. 이 기능은 웹 애플리케이션이 사용자의 색 구성표 기본 설정과 같은 미디어 쿼리의 변경 사항에 응답할 수 있도록 하는 JavaScript의 matchMedia API를 사용하여 구현됩니다.

작동 방식

matchMedia API

window.matchMedia 메소드는 미디어 쿼리를 평가하고 사용자 기본 설정에 따라 사이트의 모양을 조정하는 방법을 제공합니다. 다크 모드가 활성화되어 있는지 확인하려면 다음 JavaScript 기능을 사용할 수 있습니다:

실질적인 구현

index.html

• updateTheme 함수: 이 함수는 어두운 모드 기본 설정을 확인하고 그에 따라 클래스를 업데이트합니다. 실시간 업데이트: matchMedia에 이벤트 리스너를 추가하여 색 구성표 기본 설정의 변경 사항을 감지하고 업데이트 테마를 호출하여 실시간으로 모양을 조정합니다.

시스템의 색 구성표를 변경하면 페이지를 새로 고칠 필요 없이 웹사이트가 사용자의 기본 설정을 반영하도록 자동으로 조정됩니다.

GitHub Avinash Tare에서 나를 팔로우하세요

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