1. Donner une liste des couleurs les plus importantes sur la page actuelle, afin d'adapter plus aisément l'apparence de l'add-on sur le schéma de couleurs du Wiki hôte
2. Ajouter un nombre important de fonctions de manipulation des couleurs, afin de construire son propre schéma de couleur en plus de celui du Wiki hôte

Note : Cette librairie a été construire notamment pour les développeurs JavaScript. Si vous n'écrivez pas de script, elle ne vous sera d'aucune utilité. Plus d'informations sur les couleurs peuvent être trouvées ici.

Couleurs

• dev.colors.fandom.body - #f6f6f6 (for l'arrière-plan du contenu; $body)
• dev.colors.fandom.page - #ffffff (for l'arrière-plan de l'article; $page)
• dev.colors.fandom.menu - #404a57 (for le menu / les éléments de type bouton; $menu)
• dev.colors.fandom.header - #404a57 (for l'en-tête; $header)
• dev.colors.fandom.link - #009bbe (for les liens; $content link)
• dev.colors.fandom.split - #bacdd8 (for les arrière-plans séparés; $split)
• dev.colors.fandom.contrast - #ffffff (for le texte des menus/boutons; $contrast)
• dev.colors.fandom.text - #3a3a3a (for le texte de l'article; $text)
• dev.colors.fandom.border - #cccccc (for la couleur des bordures et séparateurs; $border)
• dev.colors.fandom.gradient - #6b7b91 (for les interactions avec des menus ou éléments; $gradient)

Appliquer les couleurs

Le moyen le plus facile d'utiliser les couleurs ci-dessus est d'utiliser un CSS basique mais d'utiliser les pseudo-couleurs au lieu de celles de départ :

a { color: $link; }

Ajoutez toutes ces règles à une chaîne de caractère qu'il faudra passer dans dev.colors.css(). dev.colors.css() remplacera toutes les pseudo-valeurs et les ajoutera à la tête du document de la feuille de style :

Exemple 1 :

dev.colors.css('a { color: $link; }');

Il est possible d'utiliser un second paramètre optionnel afin d'ajouter vos propres pseudo-valeurs. Leurs noms doivent commencer par un symbole $ :

Exemple 2 :

dev.colors.css('a { color: $link; background: $myBackGround; }', {
    myBackGround: 'black'
});

Clair et sombre

La partie la plus importante pour la construction de schémas de couleur sur Fandom est de déterminer s'il est plutôt clair ou plutôt sombre. dev.colors offre une méthode afin de déterminer ce point, mais le plus important est qu'il ajoutera deux classes à l'étiquette body :

1. .menu-dark ou .menu-bright – selon si l'arrière-plan du menu et des boutons est clair ou sombre
2. .page-dark ou .page-bright – selon si l'arrière-plan de l'endroit où se situe l'article est clair ou sombre

Manipuler les couleurs

Afin de manipuler les couleurs il faut d'abord créer un objet de couleurs color. dev.colors donne trois fonctions :

// parser permettant de créer un objet de couleur à partir d'une chaîne de caractères :
var red = dev.colors.parse('#FF0000');
var red = dev.colors.parse('#F00');
var red = dev.colors.parse('rgb(255, 0, 0)');
var red = dev.colors.parse('red');

// les valeurs dev.colors.wikia sont également des chaînes de caractères :
var body = dev.colors.parse(dev.colors.fandom.body);

// fromRgb permet d'inscrire les valeurs numériques RVB (les valeurs doivent être comprises entre 0 et 255) :
var red = dev.colors.fromRgb(255, 0, 0);

// fromHsl permet l'utilisation du modèle de couleur HSL (les valeurs doivent être comprises entre 0 et 1) :
var red = dev.colors.fromHsl(0, 1, 1);

Une fois l'objet de couleur créé, il est possible de le manipuler :

// rendre le rouge plus clair de 20% :
var lightRed = red.lighten(20);

// désaturer le rouge à hauteur de 20% :
var paleRed = red.saturate(-20);
var paleRed = red.saturate(-20);

// faire une rotation de la teinte à 180° afin d'obtenir la couleur complémentaire :
var cyan = red.rotate(180);

// mélanger deux couleurs :
var orange = red.mix('yellow');

Négation des couleurs

dev.colors a deux fonctions pour la négation des couleurs : complement() (complémenter) et invert() (inverser). Si les deux sont simples mathématiquement, leur effet sur les couleurs est assez difficile à visualiser :

• invert() affecte la teinte, la saturation et la luminosité d'une couleur car agit sur l'espace RVB : ${\displaystyle rgb_{inverted} = rgb(max_r - r, max_g - g, max_b - b)}$
• complement() n'affecte que la teinte. La saturation et la luminosité restent donc inchangées.: ${\displaystyle hsl_{complemented} = hsl(max_h - h, s, l)}$. La conséquence la plus évidente est que complement() n'affecte que les couleurs autres que le noir, le blanc, et les autres nuances de gris intermédiaires.

Quelques exemples :

Convertir les objets de couleurs en chaînes de caractères

Après avoir mélangé et mis ensemble les couleurs souhaitées, il faudra les convertir en chaînes de caractères afin de pouvoir les utiliser dans le CSS :

console.log("red: " + red.hex()); // "red: #FF000"
console.log("red: " + red.rgb()); // "red: rgb(255, 0, 0)"
console.log("red: " + red.hsl()); // "hsl: hsl(0, 100%, 100%)"

// le format héxadécimal est celui adopté par défaut :
console.log("red: " + red); // "red: #FF0000"

Conditions de bord

L'espace de couleurs HSL permet des changements n'ayant aucun effet visuel :

• Si la saturation de la couleur est de 0, la couleur restera dans les nuances de gris et le changement de teinte restera sans effet
• Si la luminosité est de 0, la couleur demeurera noire et donc ni le changement de teinte ni celui de la saturation n'aura le moindre effet

La librairie ne filtre et ne supprime pas les valeurs sans effet.

Les méthodes suivantes utilisent l'espace de couleur HSL (Teinte Saturation Lumière) :

• Color.rotate
• Color.hue
• Color.saturate
• Color.saturation
• Color.lighten
• Color.lightness
• Color.complement

Référence

Méthodes de dev.colors

dev.colors.parse(color)

parse la chaîne de caractère color pour la passer en objet de couleur

Parameters

1. color: string

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si la chaîne de peut être parsée ou que les valeurs sont hors limites

Exemples

var red   = dev.colors.parse('#FF0000'),
    green = dev.colors.parse('#0F0'),
    blue  = dev.colors.parse('rgb(0, 0, 255)'),
    white = dev.colors.parse('white'),
    page  = dev.colors.parse(dev.colors.fandom.page);

dev.colors.fromRgb(red, green, blue)

crée un objet de couleur Color à partir de valeurs numériques RVB

Parameters

1. red: Nombre compris entre 0 et 255
2. green: Nombre compris entre 0 et 255
3. blue: Nombre compris entre 0 et 255

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si les paramètres ne sont pas des nombres ou sont des nombres hors limites

Exemples

var red = dev.colors.fromRgb(255, 0, 0);

dev.colors.fromHsl(hue, saturation, lightness)

crée un objet de couleur Color à partir des valeurs teinte, saturation et luminosité (HSL)

Parameters

1. hue: Nombre compris entre 0 et 1
2. saturation: Nombre compris entre 0 et 1
3. lightness: Nombre compris entre 0 et 1

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si les paramètres ne sont pas des nombres ou sont des nombres hors limites

Exemples

var red = dev.colors.fromHsl(0, 1, 1);

dev.colors.css(styles)

ajoute une chaîne de caractères CSS à l'en-tête du document après avoir remplacé les pseudo-valeurs

Parameters

1. styles: chaîne de caractères pouvant être parsée dans le CSS

dev.colors.css(styles, custom)

ajoute une chaîne de caractères CSS à l'en-tête du document après avoir remplacé les pseudo-valeurs

Parameters

1. styles: chaîne de caractères pouvant être parsée dans le CSS
2. custom: objet avec comme clés des pseudo-valeurs et des valeurs réelles comme valeurs

Methods of Color Objects

Color.rotate(degree)

Effectue la rotation d'une teinte à l'aide d'une valeur en degrés

Parameters

1. degree: nombre compris entre -360 et 360

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si degree n'est pas un nombre ou est un nombre hors limites

Exemples

var magenta = dev.colors.parse('lime').rotate(180);
var blue = blue.rotate(360).rotate(-360);  // no change!

Color.saturate(percentage)

sature (valeurs positives) or désature (valeurs négatives) une couleur

Parameters

1. percentage: nombre compris entre -100 et 100

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si degree n'est pas un nombre ou est un nombre hors limites

Exemples

var paleBlue = dev.colors.parse('blue').saturate(-10);

Color.lighten(percentage)

augmente (valeurs positives) ou décrémente (valeurs négatives) la valeur de luminosité d'une couleur.

Parameters

1. percentage: nombre compris entre -100 et 100

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si degree n'est pas un nombre ou est un nombre hors limites

Exemples

var darkBlue = dev.colors.parse('blue').lighten(-10);

Color.mix(otherColor)

mélange deux couleurs ensemble (équivalent à une fonction SASS)

Parameters

1. otherColor: Objet Color ou chaîne de caractères qui peut y être parsée

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si otherColor n'est pas un objet Color ou qu'il ne peut être parsé

Exemples

var orange = yellow.mix('red');

Color.mix(otherColor, percentage)

Mixes a second color with the object's current color. The given weight value biases the proportion/dominance of the current color. Values below 50 bias against the current color, values above 50 are in favor of it.

Parameters

1. otherColor: Objet Color ou chaîne de caractères qui peut y être parsée
2. percentage: nombre compris entre 0 et 100

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si otherColor n'est pas un objet Color ou qu'il ne peut être parsé

Exemples

var sunYellow = yellow.mix('red', 80);

Color.invert()

inverse une couleur (cf section Négation des couleurs ci-dessus)

Returns

nouvel objet Couleur (Color)

Color.complement()

complémente une couleur (cf section Négation des couleurs ci-dessus)

Returns

nouvel objet Couleur (Color)

Color.isBright()

vérifie si une couleur est sombre ou claire

Returns

boolean

Exemples

console.log(dev.colors.parse('lightgray').isBright());  // true
console.log(dev.colors.parse('darkgray').isBright());   // false

Color.isColor()

Vérifie qu'une couleur ne soit pas un niveau de gris, autrement dit que la saturation et la luminosité sont strictement positifs.

Returns

boolean

Exemples

console.log(dev.colors.parse('white').isColor());  // false
console.log(dev.colors.parse('orange').isColor()); // true

Color.red()

Applique ou récupère l'amont du spectre de rouge dans la couleur testée

Returns

Nombre compris entre 0 et 255

Exemples

alert(dev.colors.parse('red').red()); // 255

Color.red(value)

Sets the amount of red spectrum mixed into the color.

Parameters

1. value: Nombre compris entre 0 et 255

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si degree n'est pas un nombre ou est un nombre hors limites

Exemples

var white = cyan.red(255);

Color.green()

Applique ou récupère l'amont du spectre de vert dans la couleur testée

Returns

Nombre compris entre 0 et 255

Exemples

alert(dev.colors.parse('red').green()); // 0

Color.green(value)

Sets the amount of green spectrum mixed into the color.

Parameters

1. value: Nombre compris entre 0 et 255

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si degree n'est pas un nombre ou est un nombre hors limites

Exemples

var white = magenta.green(255);

Color.blue()

Applique ou récupère l'amont du spectre de bleu dans la couleur testée

Returns

Nombre compris entre 0 et 255

Exemples

alert(dev.colors.parse('red').blue()); // 0

Color.blue(value)

Sets the amount of blue spectrum mixed into the color.

Parameters

1. value: Nombre compris entre 0 et 255

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si degree n'est pas un nombre ou est un nombre hors limites

Exemples

var white = yellow.blue(255);

Color.hue()

Applique ou récupère la valeur de teinte de la couleur testée

Returns

Nombre compris entre 0 et 1

Exemples

alert(dev.colors.parse('white').hue()); // 0

Color.hue(value)

Sets the hue of a color.

Parameters

1. value: Nombre compris entre 0 et 1

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si degree n'est pas un nombre ou est un nombre hors limites

Exemples

var red = cyan.hue(0);

Color.saturation()

Applique ou récupère la valeur de saturation de la couleur testée

Returns

Nombre compris entre 0 et 1

Exemples

alert(dev.colors.parse('white').saturation()); // 0

Color.saturation(value)

Sets the saturation of a color.

Parameters

1. value: Nombre compris entre 0 et 1

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si degree n'est pas un nombre ou est un nombre hors limites

Exemples

var white = red.saturation(0);

Color.lightness()

Applique ou récupère la valeur de luminosité de la couleur testée

Returns

Nombre compris entre 0 et 1

Exemples

alert(dev.colors.parse('white').lightness()); // 1

Color.lightness(value)

Sets the saturation of a color.

Parameters

1. value: Nombre compris entre 0 et 1

Returns

nouvel objet Couleur (Color)

Throws

Une erreur si degree n'est pas un nombre ou est un nombre hors limites

Exemples

var black = red.lightness(0);

Color.rgb()

convertit l'objet Couleur (Color) en chaîne de caractères dans le format rgb() (RVB)

Returns

string

Exemples

alert('Blue is: ' + dev.colors.parse('blue').rgb()); // Blue is: rgb(0, 0, 255)

Color.hsl()

convertit l'objet Couleur (Color) en chaîne de caractères dans le format hsl() (Teinte/Saturation/Luminsoité)

Returns

string

Exemples

alert('Blue is: ' + dev.colors.parse('blue').hsl());
// Blue is: hsl(240, 100%, 50%)

Color.hex()

convertit l'objet Couleur (Color) en son code héxadécimal

Returns

string

Exemples

alert('Blue is: ' + dev.colors.parse('blue').hex()); // Blue is: #0000FF

Color.toString()

toString() est une fonction JavaScript standard. Il s'agit d'un alias pour Color.hex qui convertira automatiquement les instances de l'objet de couleur en forme héxadécimale une fois concaténées.

Returns

string

Exemples

alert('Blue is: ' + dev.colors.parse('blue')); // Blue is: #0000ff