집 >웹 프론트엔드 >JS 튜토리얼 >Js에서 사용자가 다크 모드에 있는지 감지하는 방법

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

王林원래의: 2024-08-24 22:30:03665검색

How to Detect if a User is in Dark Mode In Js

소개

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

다크 모드 감지 이해

다크 모드의 인기로 인해 이제 많은 웹사이트와 애플리케이션에서 사용자의 시스템 기본 설정에 맞는 테마를 제공하고 있습니다. 이 기능은 웹 애플리케이션이 사용자의 색 구성표 기본 설정과 같은 미디어 쿼리의 변경 사항에 응답할 수 있도록 하는 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

<!DOCTYPE html>
<html>
<head>
    <title>Dark Mode Demo</title>
    <style>
        .dark {
            background: black;
            color: white;
        }
        .light {
            background: white;
            color: black;
        }
    </style>
</head>
<body>

    <h1>Hello, World!</h1>

    <!-- scripts -->
    <script>
        // Function to check if dark mode is enabled
        function isDarkMode() {
            return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
        }

        // Function to update the theme based on the user's preference
        function updateTheme() {
            if (isDarkMode()) {
                document.body.classList.add("dark");
                document.body.classList.remove("light");
            } else {
                document.body.classList.add("light");
                document.body.classList.remove("dark");
            }
        }

        // Initial theme setup
        updateTheme();

        // Listen for changes in the color scheme preference
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);
    </script>
</body>
</html>

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

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

GitHub Avinash Tare에서 팔로우하세요

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

JavaScript html if switch using class Event JS function this github

성명：

이전 기사：4에서 알아야 할 주요 무료 API다음 기사：4에서 알아야 할 주요 무료 API