Comment pouvez-vous remplacer le paramètre « préfère-couleur-schéma » du système pour des sites Web spécifiques et garantir une expérience utilisateur cohérente, quelle que soit la préférence de mode sombre de leur système ?

Remplacement du paramètre CSS "prefers-color-scheme"

Afin de s'adapter à l'introduction des modes sombres dans macOS, Windows et iOS, il est indispensable de mettre en place un mode sombre pour les applications web. Les options natives de Safari, Chrome et Firefox utilisent la règle multimédia CSS « ​​@media (prefers-color-scheme: dark) » pour appliquer automatiquement les styles de mode sombre lorsque le système est défini sur le mode sombre.

Cependant, la limite de cette approche réside dans la préférence potentielle de certains utilisateurs de remplacer le mode sombre du système pour des sites Web spécifiques. De plus, Microsoft Edge ne prend actuellement pas en charge cette règle multimédia.

Solution

Pour relever ce défi, une solution complète implique les éléments suivants :

CSS

Implémentation de variables et de thèmes 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>

Ensuite, utilisez ces variables le cas échéant :

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

JavaScript

Détectez le thème préféré de l'utilisateur et basculez entre les modes clair et sombre :

<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

Incluez une case à cocher pour basculer entre les thèmes :

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

Cette approche utilise des variables CSS et JavaScript pour détecter automatiquement le thème préféré de l'utilisateur et l'appliquer dynamiquement. Il offre également à l'utilisateur la possibilité de remplacer le paramètre du mode sombre pour des applications Web spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!