특정 웹사이트에 대한 시스템의 \"prefers-color-scheme\" 설정을 어떻게 무시하고 시스템의 어두운 모드 기본 설정에 관계없이 일관된 사용자 경험을 보장할 수 있습니까?

CSS "prefers-color-scheme" 설정 재정의

macOS, Windows 및 Windows에서 다크 모드 도입을 수용하기 위해 iOS의 경우 웹 애플리케이션에서는 다크 모드 구현이 필수입니다. Safari, Chrome 및 Firefox의 기본 옵션은 CSS 미디어 규칙 "@media (prefers-color-scheme: dark)"를 활용하여 시스템이 다크 모드로 설정된 경우 다크 모드 스타일을 자동으로 적용합니다.

단, 이 접근 방식의 한계는 일부 사용자가 특정 웹 사이트에 대해 시스템 어두운 모드를 재정의하려는 잠재적인 선호도에 있습니다. 또한 현재 Microsoft Edge에는 이 미디어 규칙에 대한 지원이 부족합니다.

솔루션

이 문제를 해결하기 위해 포괄적인 솔루션에는 다음이 포함됩니다.

CSS

CSS 변수 및 테마 구현:

<code class="css">:root {
    --font-color: #000;
    --link-color: #1C75B9;
    --link-white-color: #fff;
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    --link-color: #0a86da;
    --link-white-color: #c1bfbd;
    --bg-color: #333;
}</code>

그런 다음 해당하는 경우 다음 변수를 활용하세요.

<code class="css">body {
    color: #000;
    color: var(--font-color);
    background: rgb(243,243,243);
    background: var(--bg-color);
}</code>

JavaScript

사용자가 선호하는 테마를 감지하고 밝은 모드와 어두운 모드 간 전환:

<code class="javascript">function detectColorScheme(){
    var theme="light";    //default to light

    // Get the theme from local storage, overriding OS settings
    if(localStorage.getItem("theme")){
        if(localStorage.getItem("theme") == "dark"){
            var theme = "dark";
        }
    } else if(!window.matchMedia) {
        // MatchMedia method not supported
        return false;
    } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
        // OS theme setting detected as dark
        var theme = "dark";
    }

    // Set document with a `data-theme` attribute if dark theme preferred
    if (theme=="dark") {
         document.documentElement.setAttribute("data-theme", "dark");
    }
}
detectColorScheme();

function switchTheme(e) {
    if (e.target.checked) {
        localStorage.setItem('theme', 'dark');
        document.documentElement.setAttribute('data-theme', 'dark');
        toggleSwitch.checked = true;
    } else {
        localStorage.setItem('theme', 'light');
        document.documentElement.setAttribute('data-theme', 'light');
        toggleSwitch.checked = false;
    }    
}

// Toggle switch listener
const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', switchTheme, false);

// Pre-check the dark-theme checkbox if dark-theme is set
if (document.documentElement.getAttribute("data-theme") == "dark"){
    toggleSwitch.checked = true;
}</code>

HTML

테마 간 전환을 위한 확인란을 포함합니다.

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
    <input type="checkbox" id="checkbox_theme">
</label></code>

이 접근 방식은 CSS 변수와 JavaScript를 활용하여 사용자가 선호하는 테마를 자동으로 감지하고 동적으로 적용합니다. 또한 사용자에게 특정 웹 애플리케이션에 대한 다크 모드 설정을 재정의할 수 있는 유연성을 제공합니다.

위 내용은 특정 웹사이트에 대한 시스템의 \"prefers-color-scheme\" 설정을 어떻게 무시하고 시스템의 어두운 모드 기본 설정에 관계없이 일관된 사용자 경험을 보장할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!