소개

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

다크 모드 감지 이해

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

작동 방식

matchMedia API

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

// Check if the user prefers dark mode
function isDarkMode() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

실질적인 구현

index.html

    
Hello, World!

    
    

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

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

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