Comment remplacer le paramètre du mode sombre natif et fournir aux utilisateurs un contrôle d'affichage flexible ?

Comment remplacer le paramètre du mode sombre natif

Introduction

Avec la prolifération de l'obscurité modes sur différentes plates-formes, il est important de fournir aux utilisateurs la flexibilité de choisir leur apparence d'affichage préférée. Cet article aborde le défi consistant à remplacer le paramètre natif du navigateur pour basculer entre les modes sombre et par défaut, même si le système de l'utilisateur est défini en mode sombre.

Variables et thèmes CSS

Pour créer un système de thèmes commutables, des variables et des thèmes CSS peuvent être utilisés. L'élément racine définit les variables par défaut pour le mode clair, tandis qu'un thème sombre dédié remplace ces variables par des valeurs sur le thème sombre.

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

Les éléments référencent ensuite ces variables, fournissant un thème cohérent et global sur l'ensemble du site Web.

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

JavaScript pour la détection et le basculement

Pour détecter automatiquement le thème préféré de l'utilisateur ou remplacer le paramètre du système, JavaScript est utilisé. La fonction detectColorScheme vérifie les préférences définies par l'utilisateur dans le stockage local, la prise en charge du navigateur pour matchMedia ou la préférence de mode sombre du système.

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

Un interrupteur à bascule permet aux utilisateurs de remplacer manuellement leur préférence de thème. La fonction switchTheme met à jour l'attribut data-theme et définit une variable localStorage pour conserver le paramètre lors du chargement des pages.

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

Conclusion

En combinant des variables CSS et des thèmes , et JavaScript, les sites Web peuvent fournir aux utilisateurs une interface personnalisable et centrée sur l'utilisateur, quels que soient leurs préférences système ou leurs souhaits prioritaires. Cette solution permet de faire coexister des thèmes sombres et clairs tout en assurant une expérience visuelle cohérente et maîtrisée sur l'ensemble de l'application.

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!