CSS Custom property pour récupérer une couleur définie au niveau de la page

by oilvier

HTML

<!-- 
  Il suffit de récupérer la couleur correspondant à la catégorie en cours et l'appliquer à notre custom property (ici : `--category-color`) :
  Soit dn une balise `style` définie n'importe où dans la page 
-->


<!-- Ou sinon via un attribut `style` appliqué sur une balise parente de la page (ex. : `html`)
<html style="--category-color: lime;"></html> 
-->

<style>
  :root {
    /* --category-color: lime; */
  }
</style>

<div></div>

<main>
  <p>Bonjour</p>
</main>

SCSS

div {
  margin: auto;
  width: 10em;
  height: 10em;
  background-color: var(--category-color, #0092d4); // navy étant ici la couleur de "fallback" si notre custom property n'est pas définie
}

p {
  color: var(--category-color, #0092d4);
}

main {
  color: red;
}