Donnez à n'importe quel site une couleur d'accentuation personnalisée
Chaque site choisit une couleur d'accentuation — le bleu de ses liens, le vert de son bouton principal. Si cette couleur heurte votre goût, vous n'avez pas à vivre avec. Une règle CSS JustZix peut repeindre tout un site à votre teinte favorite.
Trouvez ce qu'il faut surcharger
La couleur d'accentuation vit généralement à trois endroits : les liens, les boutons principaux, et les états de focus/sélection. Les sites modernes l'exposent souvent comme une propriété personnalisée CSS, ce qui rend votre tâche triviale.
:root {
--accent: #e8590c;
--accent-hover: #d9480f;
}Ouvrez les DevTools, inspectez un bouton, et cherchez une variable comme --primary, --brand ou --link-color. Si vous en voyez une, surchargez-la directement — tout le site se met à jour d'un coup.
:root {
--primary: #e8590c !important;
--brand-color: #e8590c !important;
--link: #e8590c !important;
}Quand il n'y a pas de variables
Beaucoup de sites plus anciens codent les couleurs en dur. Vous ciblez alors directement les éléments. Ce bloc couvre les cas courants.
a, a:visited {
color: #e8590c !important;
}
a:hover {
color: #d9480f !important;
}
button, .btn, .button,
input[type="submit"], [role="button"] {
background-color: #e8590c !important;
border-color: #e8590c !important;
color: #fff !important;
}Recolorez le focus et la sélection
Ne vous arrêtez pas aux liens. Le surlignage de sélection et les anneaux de focus portent aussi l'accentuation — les assortir rend le résultat intentionnel plutôt que rapiécé.
::selection {
background: #e8590c;
color: #fff;
}
:focus-visible {
outline: 2px solid #e8590c !important;
outline-offset: 2px;
}
input:focus, textarea:focus, select:focus {
border-color: #e8590c !important;
box-shadow: 0 0 0 3px rgba(232, 89, 12, 0.25) !important;
}Recolorez les icônes SVG
Les jeux d'icônes héritent souvent de la couleur du texte, donc ils se mettent à jour gratuitement. Celles qui ne le font pas utilisent généralement fill ou stroke — balayez-les en une seule règle.
svg, svg path {
fill: currentColor;
}
.icon, [class*="icon-"] {
color: #e8590c !important;
}Un flux de travail pratique
- Choisissez une valeur hexadécimale et réutilisez-la partout — c'est la cohérence qui fait vendre le look.
- Vérifiez d'abord les variables CSS ; surcharger une ligne vaut mieux qu'en écrire vingt.
- Gardez une teinte plus sombre pour les états de survol afin que les boutons restent interactifs.
- Vérifiez le contraste : une accentuation pâle sur du texte blanc est illisible. Visez un rapport de 4,5:1.
La recoloration d'accentuation se marie magnifiquement avec un thème sombre — voyez construire un mode sombre universel. Pour plus de snippets prêts à l'emploi, visitez nos exemples prêts à l'emploi, et si vous n'avez pas encore installé l'extension, téléchargez JustZix pour commencer.
Notez cet article
Aucune note — soyez le premier.