Changez le thème Clair et Foncé en quelques lignes de JavaScript

D'accord.. Il y a un peu de CSS impliqué ?, mais c'était beaucoup plus simple que les réponses que j'ai trouvées sur Internet.

Qu'est-ce que j'essaie d'accomplir ?
J'essaie de réaliser deux choses avec cette méthode.

1. Je dois permettre au site Web de se charger comme le préfère l'utilisateur (la partie où il a déjà choisi son thème dans le système d'exploitation)
2. Mais je veux aussi leur permettre de basculer entre les modes sombre et clair après le chargement.

Nous aurons donc un site Web qui se chargera dans le thème attendu par l'utilisateur et lui permettra ensuite de le modifier quand il le souhaite.

Étape 1 : Créer un bouton pour basculer

<img class="mode" src="./img/moon.svg">

J'utilise une image comme bouton qui a une image svg d'une lune. Vous pouvez ajouter votre bouton ou votre case à cocher qui vous convient pour basculer entre deux options.

Étape 2 : Mettez vos détails de couleur dans CSS en tant que propriétés personnalisées

:root{
    color-scheme: light dark;

    --light-bg: ghostwhite;
    --light-color: darkslategray;
    --light-code: tomato;

    --dark-bg: darkslategray;
    --dark-color: ghostwhite;
    --dark-code: gold;
}

.light{
    color-scheme: light;
}

.dark{
    color-scheme: dark;
}

D'accord... Donc, à la racine, vous voyez une propriété appelée schéma de couleurs et cela va changer la donne.
Comme vous pouvez le voir, il prend des valeurs claires ou sombres. J'ai également créé deux classes .light et .dark qui définissent la valeur du schéma de couleurs sur sombre ou clair.

Étape 3 : Ajoutez des couleurs à différentes parties de votre code

body{
    background-color: light-dark(var(--light-bg), var(--dark-bg));
}

Maintenant, chaque fois qu'une propriété demande une couleur (comme l'arrière-plan, les propriétés de couleur), vous pouvez utiliser la fonction appelée light-dark().
Cette fonction prend deux valeurs, la première est utilisée lorsque le schéma de couleurs est défini sur clair et la seconde est utilisée lorsque le schéma de couleurs est défini sur sombre.

Oui... Il s'agit d'une fonction sortie en mai 2024. Elle est assez nouvelle, mais elle sera bientôt adaptée. Et il s’agit d’un support de base au moment de la rédaction de cet article. Voici la documentation pour cela

light-dark() - CSS : Feuilles de style en cascade | MDN

Le CSS light-dark() La fonction permet de définir deux couleurs pour une propriété - renvoyant l'une des deux options de couleurs en détectant si le développeur a défini un jeu de couleurs clair ou foncé ou si l'utilisateur a demandé un thème de couleurs clair ou foncé - sans avoir besoin d'enfermer les couleurs du thème dans une préférence. -Requête de fonctionnalité multimédia avec schéma de couleurs. Les utilisateurs peuvent indiquer leur préférence en matière de palette de couleurs via les paramètres de leur système d'exploitation (par exemple, le mode clair ou sombre) ou les paramètres de leur agent utilisateur. La fonction light-dark() permet de fournir deux valeurs de couleur là où n'importe quelle valeur la valeur est acceptée. La fonction de couleur CSS light-dark() renvoie la première valeur si la préférence de l'utilisateur est définie sur clair ou si aucune préférence n'est définie et la deuxième valeur si la préférence de l'utilisateur est définie sur sombre.

développeur.mozilla.org

Si vous l'utilisez, le CSS détectera automatiquement la préférence de l'utilisateur du système d'exploitation et la définira sur la couleur souhaitée.
Nous avons atteint notre premier objectif, le site Web se chargera avec le mode couleur que l'utilisateur souhaitait déjà dans son système d'exploitation.

Étape 4 : Utilisez Javascript pour basculer entre les modes sombre et clair

// mode is the toggle button 
mode.addEventListener("click", ()=>{
    // we are getting the color scheme here
    let theme = document.documentElement.style.colorScheme;
    /*  when a website is first loaded
    it will have null as its color-scheme value*/
    if(theme == null){
        // this window.matchMedia() checks if the user prefers the dark theme
        if(window.matchMedia("(prefers-color-scheme:dark)").matches){
            /* if they prefer dark, clicking on our button should turn everything to light, 
            the color-scheme will be given a value as light  */
            document.documentElement.style.colorScheme = "light"; 
        }
        // Or else the color-scheme will be set to dark
        document.documentElement.style.colorScheme = "dark";
    }

    /* Now since our toggle button set the color scheme,
        we can simply change light to dark and dark to light using below code 
    */

    else{
        document.documentElement.style.colorScheme = (theme == "light")? "dark": "light";
    }
});

Ici, document.documentElement.style.colorScheme fait en fait référence à l'élément :root de CSS.
Comme nous avons déjà réussi à ouvrir le site Web en mode préféré de l'utilisateur à l'étape précédente, ici, lorsque vous cliquez sur le bouton bascule, il effectue les tâches suivantes.

1. Il vérifie si la palette de couleurs a une valeur, sinon, le site Web est en mode préféré de l'utilisateur, nous devons identifier s'il est sombre ou clair pour changer de mode.
2. Il utilise window.matchMedia("(prefers-color-scheme:dark)").matches pour savoir s'il est en mode sombre, s'il est en mode sombre, nous changeons le schéma de couleurs en clair, sinon , on le change en sombre.
3. La prochaine fois qu'ils cliquent sur le bouton, nous définissons déjà la valeur de notre palette de couleurs, nous basculons donc simplement entre sombre et clair.

*PS : * Ceci est mon premier message et je suis encore débutant dans le développement Web. Mais lorsque j’ai recherché cette méthode, je n’ai vu aucun article à ce sujet. Si vous le savez déjà, je suis désolé de vous avoir harcelé ?. Je pensais que cet article m'aiderait à me souvenir de ce processus chaque fois que je travaille sur un nouveau projet.
Si vous travaillez pour que votre site Web fonctionne sur d'anciens navigateurs, cette méthode n'est certainement pas pour vous. Parlez-moi dans les commentaires de cet article. Merci d'avoir lu.

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!