기본 다크 모드 설정을 재정의하고 사용자에게 유연한 디스플레이 제어를 제공하는 방법은 무엇입니까?

기본 다크 모드 설정을 재정의하는 방법

소개

어두움의 확산과 함께 다양한 플랫폼의 모드에서는 사용자가 선호하는 디스플레이 모양을 선택할 수 있는 유연성을 제공하는 것이 중요합니다. 이 문서에서는 사용자 시스템이 어두운 모드로 설정되어 있는 경우에도 기본 브라우저 설정을 재정의하여 어두운 모드와 기본 모드 사이를 전환하는 문제를 다룹니다.

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

사용자가 선호하는 테마를 자동으로 탐지하거나 시스템 설정을 재정의하기 위해 JavaScript가 사용됩니다. discoverColorScheme 기능은 로컬 저장소의 사용자 정의 기본 설정, matchMedia에 대한 브라우저 지원 또는 시스템의 어두운 모드 기본 설정을 확인합니다.

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

    // Prioritize local storage override
    if (localStorage.getItem("theme")) {
        if (localStorage.getItem("theme") == "dark") {
            theme = "dark";
        }
    } else if (!window.matchMedia) {
        // No support for matchMedia
        return false;
    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
        // System dark mode detected
        theme = "dark";
    }

    // Set `data-theme` attribute on document root
    if (theme == "dark") {
        document.documentElement.setAttribute("data-theme", "dark");
    }
}

detectColorScheme();</code>

토글 스위치를 사용하면 사용자가 테마 기본 설정을 수동으로 재정의할 수 있습니다. switchTheme 기능은 data-theme 속성을 업데이트하고 페이지 로드 시 설정을 유지하도록 localStorage 변수를 설정합니다.

<code class="javascript">const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

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;
    }
}

toggleSwitch.addEventListener('change', switchTheme, false);</code>

결론

CSS 변수를 결합하여 테마 , JavaScript 등을 통해 웹사이트는 사용자의 시스템 기본 설정이나 우선 적용 요구 사항에 관계없이 사용자 정의 가능한 사용자 중심 인터페이스를 제공할 수 있습니다. 이 솔루션을 사용하면 어두운 테마와 밝은 테마가 공존하는 동시에 전체 애플리케이션에서 일관되고 제어된 시각적 경험을 보장할 수 있습니다.

위 내용은 기본 다크 모드 설정을 재정의하고 사용자에게 유연한 디스플레이 제어를 제공하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!