css-vars-management v1.0.0

CSSVars

CSS Variables Management with JS

🔦 Utilisation

CSSVars permet de gérer les variables de couleur de son interface, en implémentant de façon dynamique des dérivés clair et foncé de chaque couleur. La librairie propose aussi l'implémentation d'un importeur de thème, utile pour créer une version dark mode par exemple.

🚀 Mise en place

npm install cssvars

La mise en place est assez simple, tout ce passe dans le constructeur, il suffit de créer un tableau d'objet en premier argument et de déclaré les jeux de couleur dans colorList ainsi que le theme dans themeURL.

Exemple

import { Theme } from "cssvars";                // 1) Importation de la librairie

new Theme({                                     // 2) Initialisation de l'objet
      colorList: [                              // 3) Ajout d'un jeu de couleur
        {
          tag: "--main-color",                  // # Nom de la variable du background
          color: "#000",                        // # Couleur du background
        },
        {
          tag: "--sub-color",                   // # Nom de la variable du texte
          color: "#000",                        // # Couleur du texte
        },
        {
          tag: "--neutral-color",               // # Nom de la variable de la couleur neutre
          color: "#d5514b"                      // # Couleur du neutre
        },
      ],
      themeURL: "/static/themes/dark.json"      // 4) Importation d'un objet JSON comportant un thème prédéfinis
    });

Résultat de sortie

:root {
    --main-color: #000;

    --main-color-light-1: #222;
    --main-color-light-2: #444;
    --main-color-light-3: #666;

    --main-color-dark-1: #000;
    --main-color-dark-2: #000;
    --main-color-dark-3: #000;

    --sub-color: #fff;

    --sub-color-light-1: #FFF;
    --sub-color-light-2: #FFF;
    --sub-color-light-3: #FFF;

    --sub-color-dark-1: #DDD;
    --sub-color-dark-2: #BBB;
    --sub-color-dark-3: #999;

    --neutral-color: #d5514b;

    --neutral-color-light-1: #F7736D;
    --neutral-color-light-2: #F9958F;
    --neutral-color-light-3: #FBB7AF;

    --neutral-color-dark-1: #B33029;
    --neutral-color-dark-2: #911007;
    --neutral-color-dark-3: #700005;
}