Bagaimana untuk Mengatasi Tetapan Mod Gelap Asli dan Menyediakan Pengguna dengan Kawalan Paparan Fleksibel?

Cara Mengatasi Tetapan Mod Gelap Asli

Pengenalan

Dengan percambahan gelap mod pada pelbagai platform, adalah penting untuk menyediakan pengguna dengan fleksibiliti dalam memilih penampilan paparan pilihan mereka. Artikel ini menangani cabaran mengatasi tetapan penyemak imbas asli untuk menogol antara mod gelap dan lalai, walaupun sistem pengguna ditetapkan kepada mod gelap.

Pembolehubah dan Tema CSS

Untuk mencipta sistem tema boleh tukar, pembolehubah dan tema CSS boleh digunakan. Elemen akar mentakrifkan pembolehubah lalai untuk mod terang, manakala tema gelap khusus mengatasi pembolehubah ini dengan nilai bertema gelap.

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

Elemen kemudian merujuk pembolehubah ini, memberikan tema yang konsisten dan global merentas tapak web.

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

JavaScript untuk Pengesanan dan Togol

Untuk mengesan tema pilihan pengguna secara automatik atau mengatasi tetapan sistem, JavaScript digunakan. Fungsi detectColorScheme menyemak pilihan yang ditentukan pengguna dalam storan setempat, sokongan penyemak imbas untuk matchMedia atau pilihan mod gelap sistem.

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

Suis togol membolehkan pengguna mengatasi pilihan tema mereka secara manual. Fungsi switchTheme mengemas kini atribut data-theme dan menetapkan pembolehubah localStorage untuk mengekalkan tetapan merentas pemuatan halaman.

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

Kesimpulan

Dengan menggabungkan pembolehubah CSS, tema , dan JavaScript, tapak web boleh menyediakan pengguna dengan antara muka yang boleh disesuaikan dan mengutamakan pengguna, tanpa mengira pilihan sistem mereka atau mengatasi keinginan. Penyelesaian ini membolehkan kewujudan bersama tema gelap dan terang sambil memastikan pengalaman visual yang konsisten dan terkawal merentas keseluruhan aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Tetapan Mod Gelap Asli dan Menyediakan Pengguna dengan Kawalan Paparan Fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!