Clicky

Comment se référer aux couleurs globales Oxygen en CSS

Exemples de couleurs globales configurées dans Oxygen

Oxygen Builder vous permet d'établir une liste de couleurs standard que vous voulez utiliser sur votre site et de les placer dans Oxygen où elles sont facilement utilisables dans la construction du site Oxgen.

C'est très pratique car cela signifie que vous pouvez facilement utiliser les mêmes couleurs dans toute la conception, et si vous changez d'avis sur une couleur particulière, aucun problème. Vous pouvez changer n'importe quelle couleur dans les paramètres globaux, et cette couleur est ensuite modifiée partout dans votre projet.

Excellent. Mais si vous n'utilisez pas le style visuel d'Oxygen, mais plutôt les boîtes de code CSS intégrées dans les onglets avancés d'Oxygen, comment pouvez-vous vous référer à ces couleurs en CSS ?

Si vous regardez la capture d'écran des couleurs que j'ai configurées dans les paramètres de couleurs globales d'Oxygen pour ce site Web, vous verrez qu'elles sont chacune dotées d'un numéro d'identification.

Vous pouvez utiliser ce nombre dans les boîtes de code CSS d'Oxygen pour vous référer aux couleurs globales. L'exemple de code ci-dessous donnera comme résultat une couleur de fond violette (#521ea2).

Utilisation des couleurs globales de l'oxygène dans les micro-matériaux

Il n'y a pas de moyen de se référer aux couleurs globales en utilisant SCSS via, par exemple, Microthemer. Vous pouvez utiliser un plugin appelé Agency Base. Je l'ai acheté et essayé, mais j'ai trouvé qu'il rendait l'interface des couleurs globales d'Oxygen plus compliquée, pas moins. Je ne l'utilise donc pas pour l'instant. A la place, avec l'éditeur SCSS de Microthemer, je crée une liste de variables de couleur en double de celles que j'ai configurées dans les couleurs globales d'Oxygen, et je les utilise. Par exemple, à partir des couleurs globales montrées dans la capture d'écran, j'ajoute la variable suivante à mon SCSS Microthemer.