Mengatasi Tetapan "prefers-color-scheme" CSS

Untuk menampung pengenalan mod gelap dalam macOS, Windows dan iOS, adalah penting untuk melaksanakan mod gelap untuk aplikasi web. Pilihan asli dalam Safari, Chrome dan Firefox menggunakan peraturan media CSS "@media (prefers-color-scheme: dark)" untuk menggunakan gaya mod gelap secara automatik apabila sistem ditetapkan kepada mod gelap.

Walau bagaimanapun, had pendekatan ini terletak pada potensi keutamaan sesetengah pengguna untuk mengatasi mod gelap sistem untuk tapak web tertentu. Selain itu, Microsoft Edge pada masa ini tidak mempunyai sokongan untuk peraturan media ini.

Penyelesaian

Untuk menangani cabaran ini, penyelesaian komprehensif melibatkan perkara berikut:

CSS

Melaksanakan pembolehubah dan tema 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>

Kemudian, gunakan pembolehubah ini jika berkenaan:

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

JavaScript

Kesan tema pilihan pengguna dan togol antara mod terang dan gelap:

<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

Sertakan kotak pilihan untuk menogol antara tema:

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

Pendekatan ini menggunakan pembolehubah CSS dan JavaScript untuk mengesan tema pilihan pengguna secara automatik dan menggunakannya secara dinamik. Ia juga memberikan pengguna kefleksibelan untuk mengatasi tetapan mod gelap untuk aplikasi web tertentu.

Atas ialah kandungan terperinci Bagaimanakah anda boleh mengatasi tetapan \'prefers-color-scheme\' sistem untuk tapak web tertentu dan memastikan pengalaman pengguna yang konsisten tanpa mengira pilihan mod gelap sistem mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!