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.
- 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)
- 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
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.
- 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.
- 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.
- 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!

Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds











Essayons de savoir un terme ici: "fournisseur de formulaire statique". Vous apportez votre HTML

Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge

Dans cette semaine, le Roundup des nouvelles de la plate-forme, Chrome présente un nouvel attribut pour le chargement, les spécifications d'accessibilité pour les développeurs Web et la BBC Moves

C'est moi qui regarde l'élément HTML pour la première fois. J'en ai été conscient depuis un certain temps, mais il ne l'a pas encore pris pour un tour. Il a un peu cool et

L'achat ou la construction est un débat classique de la technologie. Construire des choses vous-même peut être moins cher car il n'y a pas d'article de ligne sur votre facture de carte de crédit, mais

Pendant un certain temps, iTunes était le grand chien du podcasting, donc si vous avez lié "Abonnez-vous au podcast" pour aimer:

Le chef de document n'est peut-être pas la partie la plus glamour d'un site Web, mais ce qui y va est sans doute tout aussi important pour le succès de votre site Web que son

Il existe de nombreuses plates-formes d'analyse pour vous aider à suivre les données des visiteurs et d'utilisation sur vos sites. Peut-être plus particulièrement Google Analytics, qui est largement utilisé
