Remplacement: variables CSS racine des portées internes

Question

Dans notre système de conception à Stack Overflow, nous utilisons moins pour compiler les valeurs de couleur CSS.

Nous avons des variables globales moins comme @orange-500 Qui sont fréquemment modifiées pour les états de survol, la construction du style de bordure, les couleurs d'arrière-plan, etc.

Dans Less, ceci est écrit comme darken(@orange-500, 5%). J'essaie de réaliser quelque chose de similaire en utilisant des variables CSS natives. Le passage aux variables CSS nous permettra de livrer des fonctionnalités qui reposent sur le thème (Stack Exchange Network, Dark Mode, etc.) beaucoup plus rapidement, avec beaucoup moins de lignes de CSS, tandis que permettant l'échange de variables sur requête média (contraste élevé, mode sombre, etc.).

Cet exemple de remplacement de la valeur de luminosité de notre couleur dans hsl fonctionne lorsque les variables sont limitées à une classe CSS:

.card {
  --orange: hsl(255, 72%, var(--lightness, 68%));
  background: var(--orange);
}
.card:hover {
  --lightness: 45%;
}

<div class="card">
  Hello world
</div>

Cependant, nous devons spécifier nos variables de couleur globalement dans un seul endroit permutable pour prendre en charge le thème global, mais cela ne fonctionne pas comme prévu:

:root {
  --orange: hsl(255, 72%, var(--lightness, 68%));
}
.card {
  background: var(--orange);
}
.card:hover {
  --lightness: 45%;
}

<div class="card">
  Hello world
</div>

J'ai essayé de passer de :root À html ou body sans aucune chance. Des solutions à cela?

Answer 1

La solution simple consiste à placer les variables CSS dans un fichier CSS séparé, puis à les échanger au besoin. Par exemple, une requête multimédia pour prendre en charge le mode sombre peut faire l'échange ou vous pouvez utiliser JavaScript, un thème précuit, etc.

Ce qui est bien, c'est que l'échange du fichier CSS avec vos définitions de variables modifie le rendu CSS en temps réel.

Supposons que vous utilisez des requêtes multimédias pour le mode clair/sombre. Si le navigateur comprend et demande le "mode sombre", seul le premier fichier est chargé. Cependant, si le navigateur ne comprend pas ces requêtes multimédias, votre "valeur par défaut" est light.css car les deux fichiers CSS sont chargés mais les règles suivantes remplacent les règles précédentes .

<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<!-- The main stylesheet -->
<link rel="stylesheet" href="/style.css">

Dans ces feuilles de style, vous souhaitez utiliser le :root pseudo-classe car elle est essentiellement la même que HTML, mais a une spécificité plus élevée dans la plupart des navigateurs.

light.css

:root {
  --text-color: #333;
  --background-color: #fff;
}

dark.css

:root {
  --text-color: #dadada;
  --background-color: #333;
}

Notez également que la simplification des variables et la construction de la règle complète à l'intérieur de l'élément est une bonne idée, comme Travis le mentionne dans cette réponse.

style.css (document de style principal)

body {
  color: var(--text-color);
  background-color: var(--background-color);
}

En remarque, vous voudrez peut-être lire sur le CSS color-scheme propriété pour obtenir un meilleur support avec les éléments natifs du navigateur.