CSS : mode sombre facile

Un mode sombre est une option d'affichage qui fait passer le thème de couleur d'un site Web ou d'une application d'un fond clair (avec du texte sombre) à un fond sombre (avec du texte clair). Ce mode est devenu populaire en raison de ses avantages en matière de réduction de la fatigue oculaire dans les environnements faiblement éclairés, d'économie d'énergie sur les appareils dotés d'écrans OLED et d'offre une alternative visuellement attrayante aux thèmes d'éclairage traditionnels.
Habituellement, vous pouvez basculer entre 3 modes : réglage du thème sombre, clair et système.

Ancienne manière

Jusqu'à présent, nous avons utilisé la fonctionnalité multimédia CSS préfère-couleur-schéma :

La fonctionnalité multimédia CSS préfère-color-scheme est utilisée pour détecter si un utilisateur a demandé des thèmes de couleurs claires ou sombres. Un utilisateur indique sa préférence via un paramètre du système d'exploitation (par exemple, mode clair ou sombre) ou un paramètre d'agent utilisateur.

@media (prefers-color-scheme: dark) {
  .post {
    background: #753;
    color: #dcb;
  }
}

@media (prefers-color-scheme: light) {
  .post {
    background: #bcd;
    color: #334;
  }
}

Comme vous pouvez le constater, nous devons conserver 2 thèmes, un pour chaque mode.
Adopter cette approche dans une application à grande échelle peut être difficile.

Une manière nouvelle et meilleure

Heureusement, CSS a introduit une nouvelle propriété pour nous faciliter la vie, light-dark() et elle est prise en charge par tous les principaux navigateurs :

La fonction CSS light-dark() 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'encapsuler les couleurs du thème dans une requête de fonctionnalité multimédia de schéma de couleurs préférées.

:root {
  color-scheme: light dark;
}

body {
  color: light-dark(#292524, #f5f5f4);
  background-color: light-dark(#f5f5f4, #292524);
}

Utilisez simplement la propriété light-dark() sur chaque élément que nous souhaitons basculer entre les modes, c'est tout !

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!