Hi,
I’ve been playing with the color schemes. I’m trying to set the highlight color but when applied, the results are not the same colors, some kind of weird transformation is going on.
See the next image:
Is it the default behaviour?
Yes, this is the default behavior.
There is the highlight color, which is the value you set in the color scheme,
In your case it would look like:
$highlight: #1a1a1a;
And the usage would be like:
background-color: $highlight;
And then there are three color transformations based on the $highlight and $secondary values and they are:
$highlight-low: dark-light-diff($highlight, $secondary, 70%, -80%);
$highlight-medium: dark-light-diff($highlight, $secondary, 50%, -55%);
$highlight-high: dark-light-diff($highlight, $secondary, -50%, -10%);
And these are used like so:
.overridden {
background-color: $highlight-medium;
}
C’est très utile.
J’ai un client qui pense qu’il ne souhaite pas avoir les différentes versions de ces couleurs (je soupçonne qu’il a tort). Comment puis-je réécrire les divers éléments mis en évidence pour éviter qu’ils ne changent dans un thème ? Puis-je les remplacer globalement dans common.scss ?
Vous trouverez toutes les couleurs ici : color_transformations.scss
Le fichier about.json du thème contient une section dédiée aux couleurs. Si vous souhaitez remplacer l’une des couleurs du fichier ci-dessus, il vous suffit de définir la nouvelle valeur dans cette section, comme ceci :
{
"name": "Mon thème",
"about_url": null,
"license_url": null,
"assets": {},
"color_schemes": {
"Mon schéma de couleurs": {
"highlight-low": "FF0000",
"highlight-medium": "FF0000",
"highlight-high": "FF0000"
}
}
}