Comment effectuer une transformation fluide du mode Sombre/Clair

D'accord, vous êtes donc sur un site Web et il est en mode sombre. Mais vous préférez le mode lumière (si vous le faites, eh bien, c'est votre prérogative ?). Il est 3 heures du matin. Vous cliquez sur le bouton bascule mode sombre/clair. Soudain, un éclair ! Une cécité temporaire s’ensuit, suivie d’acouphènes et d’une convulsion. Un voyage coûteux aux urgences plus tard (merci, le système de santé américain !), et vous en êtes des milliers.

C'était un peu hyperbole, mais le changement de thème discordant est indéniablement ennuyeux. Réparons-le ! En utilisant du CSS de pointe (d'accord, peut-être pas que de pointe), nous pouvons mettre en œuvre une transition en douceur. Je fournirai le code et l'explication.

Tout d'abord, vous aurez besoin d'un sélecteur de thème. Consultez Ce lien pour obtenir des instructions si vous n'en avez pas déjà un. Cette méthode est compatible avec les variables CSS (--color: blue;) et les approches similaires.

Voici le code :

<code class="language-css">* {
  transition-duration: 1s;
}</code>

Ajustez le 1s (une seconde) à votre vitesse de transition préférée.

L'astérisque (*) est un sélecteur universel, ce qui signifie que chaque élément de la page est affecté. En définissant transition-duration, nous demandons au navigateur d'appliquer une transition douce chaque fois qu'une propriété d'un élément change. C'est simple !

Merci d'avoir lu !

Andrew McSillyone

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!