Palette de couleurs pour thème

EH TOI LÀ !

Cette page est utilisée pour le fonctionnement du site,

MERCI DE NE PAS MODIFIER CETTE PAGE
SANS LA PERMISSION DU STAFF.


Qu'est-ce que c'est ?

Un component pour afficher de façon esthétique et pratique la palette de couleurs des CSS.

Conçu par WoedenazWoedenaz et passé en component par CroquemboucheCroquembouche.

Utilisation

[[include component:theme-squares -=-
| color1-name=Ma couleur préférée
| color1-variable=--fav-color
| color1-info=(191, 144, 0)
]]

Notez bien le "-=-" après le nom du component. Vous devez l'inclure, sinon tout ce texte qui explique comment l'utiliser apparaîtra sur votre page.

Pour ce component, il y a trois paramètres par couleur. Remplacez N par le numéro de la couleur.

colorN-name Le nom de la couleur. Vous mettez ce que vous voulez, soyez créatif !
colorN-variable Le nom de la variable CSS correspondant à cette couleur.
Cette variable devrait être une valeur RGB, c'est-à-dire trois chiffres séparés par des virgules. Si vous utilisez un autre format comme l'hexadécimal, vous devrez écraser manuellement les couleurs par défaut pour afficher les vôtres.
colorN-info Courte information à propos de la couleur, généralement sa valeur RGB.
Si vous ne voulez rien mettre, utilisez @@ @@.
colorN-has-light-text
Optionnel. Par défaut : 0
0 ou 1. Détermine la couleur du texte dans le carré. Utile pour vous assurer que les cases sombres ont un texte clair et inversement.
Avec 1, la valeur de --swatch-text-light est utilisée, ou du blanc (255, 255, 255) si vous n'en avez pas défini une. Avec 0, c'est --swatch-text-dark ou du noir (0, 0, 0).

Ce component peut contenir un maximum de 6 couleurs primaires et 12 secondaires, mais vous devriez généralement rester autour de 2 primaires et 6 secondaires.

Pour ajouter une couleur primaire, ajoutez juste les trois premiers des paramètres ci-dessus dans l'include, comme montré dans l'exemple. Pour une couleur secondaire, remplacez aussi "color" par "subcolor".

Exemple

Voici un plus long exemple tiré d'un thème au hasard :

[[include component:theme-squares -=-
| color1-name=Gris Payne
| color1-variable=--gray-monochrome
| color1-info=(66, 66, 72)
| color1-has-light-text=1
| color2-name=Palissandre
| color2-variable=--bright-accent
| color2-info=(133, 0, 5)
| color2-has-light-text=1
| subcolor1-name=Alto
| subcolor1-variable=--very-light-gray-monochrome
| subcolor1-info=(215, 215, 215)
| subcolor2-name=Fumée blanche
| subcolor2-variable=--pale-gray-monochrome
| subcolor2-info=(244, 244, 244)
| subcolor3-name=Bastille
| subcolor3-variable=--dark-gray-monochrome
| subcolor3-info=(48, 48, 52)
| subcolor3-has-light-text=1
| subcolor4-name=Boucanier
| subcolor4-variable=--medium-accent
| subcolor4-info=(100, 46, 44)
| subcolor4-has-light-text=1
| subcolor5-name=Marron
| subcolor5-variable=--dark-accent
| subcolor5-info=(100, 3, 15)
| subcolor5-has-light-text=1
| subcolor6-name=Mango tango
| subcolor6-variable=--newpage-color
| subcolor6-info=(221, 102, 17)
]]

Ce code donne la palette suivante :

bhl-squares.png

Outil pour convertir la syntaxe existante en arguments pour ce component

{$color1-name}{$color1-variable}{$color1-info}
{$color2-name}{$color2-variable}{$color2-info}
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
{$subcolor1-name}{$subcolor1-variable}{$subcolor1-info}
{$subcolor2-name}{$subcolor2-variable}{$subcolor2-info}
{$subcolor3-name}{$subcolor3-variable}{$subcolor3-info}
{$subcolor4-name}{$subcolor4-variable}{$subcolor4-info}
{$subcolor5-name}{$subcolor5-variable}{$subcolor5-info}
{$subcolor6-name}{$subcolor6-variable}{$subcolor6-info}
{$subcolor7-name}{$subcolor7-variable}{$subcolor7-info}
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}
Sauf mention contraire, le contenu de cette page est protégé par la licence Creative Commons Attribution-ShareAlike 3.0 License