Une approche sèche des thèmes de couleur dans CSS

Récemment, Florens Verschelde a demandé comment définir les styles de mode noir dans les requêtes de classe et médiatique tout en évitant la déclaration répétée de propriétés personnalisées CSS. J'ai également rencontré ce problème dans le passé, mais je n'ai pas trouvé de solution appropriée.

Notre objectif est d'éviter de redéfinir - et donc de répéter - de personnaliser les propriétés lors du changement de lumière et de mode sombre. C'est l'objectif de la programmation sèche (ne vous répétez pas), mais le modèle typique des sujets de commutation est généralement comme ceci:

 <code>:root { --background: #fff; --text-color: #0f1031; /* etc. */ } @media (prefers-color-scheme: dark) { :root { --background: #0f1031; --text-color: #fff; /* etc. */ } }</code>

Comprenez-vous ce que je veux dire? Bien sûr, cela peut ne pas sembler important dans ce court exemple, mais imaginez traiter des dizaines de propriétés personnalisées à la fois - c'est beaucoup de répétition!

Ensuite, je me suis souvenu de l'astuce d'utiliser --var: ; , et bien que je n'y ai pas pensé au début, j'ai trouvé un moyen de le faire fonctionner: au lieu d'utiliser var(--light-value, var(--dark-value)) ou des combinaisons imbriquées similaires, utilisez-les côte à côte!

Bien sûr, il doit y avoir quelqu'un qui a découvert cela avant moi, mais je n'ai pas entendu parler de propriétés personnalisées CSS (ou plutôt, abusées) pour y parvenir. Sans plus tarder, c'est l'idée:

 <code>--color: var(--light, orchid) var(--dark, rebeccapurple);</code>

Si la valeur --light est définie sur initial , la valeur de secours (orchidée) sera utilisée, ce qui signifie que --dark devrait être défini sur un caractère spatial (il s'agit d'une valeur valide), ce qui fait ressembler la valeur calculée finale à ce sujet:

 <code>--color: orchid ; /* 注意额外的空格*/</code>

Au lieu de cela, si --light est défini sur l'espace et --dark est défini sur initial , nous nous retrouvons avec une valeur calculée comme:

 <code>--color: rebeccapurple; /* 同样，注意空格*/</code>

Maintenant, c'est très bien, mais nous devons définir les propriétés personnalisées --light et --dark basées sur le contexte. Les utilisateurs peuvent définir les préférences du système (clair ou sombre), ou utiliser certains éléments de l'interface utilisateur pour changer le thème du site Web. Tout comme l'exemple Florens, nous définirons ces trois cas et utiliserons les constantes «ON» et «OFF» proposées par Lea pour quelques petites améliorations de lisibilité pour le rendre clairement en un coup d'œil:

 <code>:root { /* 感谢Lea Verou！*/ --ON: initial; --OFF: ; } /* 默认情况下，浅色主题处于启用状态*/ .theme-default, .theme-light { --light: var(--ON); --dark: var(--OFF); } /* 默认情况下，暗色主题处于禁用状态*/ .theme-dark { --light: var(--OFF); --dark: var(--ON); } /* 如果用户偏好暗色，那么他们将获得暗色主题*/ @media (prefers-color-scheme: dark) { .theme-default { --light: var(--OFF); --dark: var(--ON); } }</code>

Nous pouvons ensuite définir toutes les variables de sujet dans une seule déclaration sans duplication. Dans cet exemple, theme-* est définie sur html , afin que nous puissions utiliser :root comme sélecteur, comme beaucoup de gens aiment le faire, mais si les propriétés en cascade des propriétés personnalisées ont plus de sens, vous pouvez également les définir sur body .

 <code>:root { --text: var(--light, black) var(--dark, white); --bg: var(--light, orchid) var(--dark, rebeccapurple); }</code>

Pour les utiliser, nous utilisons var() et le repli intégré parce que nous aimons être prudents:

 <code>body { color: var(--text, navy); background-color: var(--bg, lightgray); }</code>

J'espère que vous avez commencé à voir les avantages ici. Plutôt que de définir et de changer un grand nombre de propriétés personnalisées, nous traitons deux propriétés et définissons toutes les autres propriétés qu'une seule fois :root . C'est une énorme amélioration par rapport à l'endroit où nous avons commencé.

Implémentation de code plus sec en utilisant un pré-incessant

Si je devais regarder la ligne de code suivante hors contexte, je serais certainement confus car la couleur est une valeur unique, pas deux!

 <code>--text: var(--light, black) var(--dark, white);</code>

C'est pourquoi je préfère être un peu abstrait. Nous pouvons configurer une fonction en utilisant notre préprocesseur préféré (Sass dans mon cas). Si nous gardons le code avec --light et --dark définies ci-dessus dans différents contextes, nous avons juste besoin de modifier la déclaration d'attribut personnalisée réelle. Créons une fonction light-dark qui nous renvoie la syntaxe CSS:

 @Function Light-Dark ($ Light, $ Dark) {
  @return var (- Light, # {$ light}) var (- sombre, # {$ dark});
}

Nous l'utiliserons comme ceci:

 :racine {
   --Text: # {Light-Dark (noir, blanc)};
   --bg: # {Light-Dark (orchid, rebeccapurple)};
   --ACcent: # {Light-Dark (# 6D386B, # b399cc)};
}

Vous remarquerez qu'il y a un séparateur d'interpolation #{ … } autour de l'appel de fonction. Sans ceux-ci, SASS sortira le code tel quel (tout comme une fonction CSS normale). Vous pouvez essayer diverses implémentations, mais la complexité de syntaxe dépend de vos préférences.

Comment cela cherche-t-il une base de code plus sèche?

Plus d'un sujet? aucun problème!

Vous pouvez le faire avec plus de deux modes. Plus vous ajoutez de sujets, plus il sera complexe de gérer, mais la clé est que cela est possible ! Nous ajoutons un autre groupe de sujets de variables ON ou OFF et définissons une variable supplémentaire dans la liste des valeurs.

 <code>.theme-pride { --light: var(--OFF); --dark: var(--OFF); --pride: var(--ON); } :root { --text: var(--light, black) var(--dark, white) var(--pride, #ff8c00) ; /* 换行符是完全有效的*/ /* 其他要声明的变量… */ }</code>

Est-ce une compétence? Oui, absolument. Est-ce un bon cas d'utilisation pour les booléens CSS potentiels et inexistants? Ok, c'est un rêve.

Et toi? Avez-vous résolu ce problème d'une manière différente? Veuillez partager les commentaires!

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!