Utilisateur:JF Lepage/Aide-mémoire

Quelles couleurs ?

L'usage de la couleur est fortement déconseillé dans les articles. Ailleurs, il conviendra de choisir des couleurs qui respectent la charge graphique et les personnes qui consultent Wikipédia.

Le fameux adage « les goûts et les couleurs ça ne se discute pas » ne se dément pas, et quelle que soit la couleur que vous choisirez, vous ne ferez sûrement pas l'unanimité.

Les couleurs ont un sens. C'est pour cela qu'il existe une charte graphique : fond blanc, boutons et liens bleus, liens visités violet, cadres gris, etc. Par conséquent, il ne faut pas tenter d'imiter des éléments existants, sous peine de perturber les personnes qui lisent Wikipédia. L'accessibilité des couleurs doit être prise en compte.

Si vous hésitez dans le choix d'une couleur, orientez-vous vers une couleur neutre (gris ou pastel) pour un fond et foncée pour les objets devant ressortir sur fond clair (comme les polices de caractères) ; il est rappelé que l'usage de la couleur est fortement déconseillé pour le texte normal des articles et que la mise en couleurs d'éléments du type ligne de bus ou enseigne n'est pas accepté. Pensez à vous référer aux discussions qui ont pu avoir lieu sur le sujet auprès des projets éditoriaux concernés.

Si l'usage des couleurs est vraiment nécessaire, ou si vous voulez réaliser une carte, consultez Aide:Accessibilité des couleurs pour vous aider à choisir des couleurs accessibles aux déficients visuels de la couleur, et consultez les membre du projet:charte graphique.

Avec l'introduction du mode sombre, tout usage de couleurs doit désormais rendre correctement à la fois en mode clair et en mode sombre. La méthode privilégiée est l'utilisation de TemplateStyles.

Texte simple

Avec un modèle

Avec le nom de la couleur

Attention, la plupart de ces modèles n'ont pas été adaptés pour une utilisation avec le mode sombre. Vérifier bien que le rendu est correct à la fois en mode clair et sombre pour toute utilisation.

Pour mettre le mot « paon » en bleu et le mot « herbe » en vert, il suffit d'utiliser les modèles {{bleu}} et {{vert}} comme ceci : {{bleu|paon}} et {{vert|herbe}}. On obtient ainsi paon et herbe. Pour cela, cliquez sur le bouton « Modèle » puis écrivez entre les accolades le nom de la couleur désirée, par exemple rouge. Ensuite, vous devez mettre le signe |. Enfin, écrivez le (groupe de) mot(s) que vous voulez mettre en couleur. Vous pouvez obtenir tous les modèles de mise en couleur rapide sur la page dédiée.

Le modèle {{Couleur de la police}} est plus puissant, puisqu'il permet de modifier la couleur d'un texte et la couleur du fond, pour du texte simple ou un lien. Il utilise les noms anglais des couleurs HTML.

Avec un code couleur

Exemple : {{Coloré|#9966CC|chaussette}} donne chaussette

Couleur via des modèles et des TemplateStyles

Bien que plus complexe, la méthode recommandée pour des couleurs qui s'adaptent proprement au mode sombre est d'utiliser des modèles dans lesquels les couleurs sont définies via des TemplateStyles.

Un TemplateStyle est une sous-page d'un modèle nommée [[Modèle:NOM_MODELE/styles.css]] et insérée dans le code du modèle principal en mettant <templatestyles src="NOM_MODELE/styles.css"/>, généralement au début. Elle est écrite en langage css.

Exemple de code pour un TemplateStyle :

/* Style pour le thème clair */
.texte-coloré {
    color: darkgreen
}

/* Style pour le thème sombre */
html.skin-theme-clientpref-night .texte-coloré {
    color: lightgreen
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .texte-coloré {
        color: lightgreen
    }
}

On note que le style en mode sombre doit être défini deux fois : une fois pour le mode sombre et une fois pour le mode automatique rendant sombre.

Il ne suffit pas d'insérer un templatestyle pour que le texte soit colorié automatiquement. Il faut encore ajouter la classe texte-coloré aux éléments à colorier (texte-coloré est un exemple, en pratique il faut donner un nom suffisamment unique pour ne pas risquer qu'il soit déjà utilisé ailleurs, par exemple NOM-MODELE-texte-coloré).

Exemple de code de modèle :

<includeonly><templatestyles src="NOM_MODELE/styles.css"/>

<span class="texte-coloré"> TEXTE EN COULEUR !!! </span>

</includeonly><noinclude>
{{Documentation}}
</noinclude>

Variables css

Une variable css est une couleur spécifique à MediaWiki. Elle peut être utilisée en lieu et place d'une couleur normale et a l'avantage de s'adapter au mode clair / sombre choisi.

Par exemple var(--color-base, #202122) rendra noir en mode clair et blanc en mode sombre. La syntaxe sans fallback value var(--color-base) n'est pas compatible avec les anciens affichages et ne doit donc pas être utilisée.

Les variables css étant naturellement adaptées au mode choisi, le code des templatestyles peut être simplifié :

.texte-coloré {
    color: var(--color-success, #14866d)
}

Voir aussi

• Modèle:Principales couleurs pour des couleurs avec Saturation maximale de 50 %.

Une table de couleurs très détaillée est disponible sur Aide:Couleurs/table détaillée. Attention cette page excède les 170 ko !