Colors

This is a library for handling colors in the Wikia environment. This library serves two purposes:


 * 1) It provides a list of the most important colors on the current page, so you can easily adapt your addon's appearance to the host wiki's color schome.
 * 2) And it provides a bunch of functions for manipulating colors, so you can build your own color scheme on top of the host wiki's color scheme

Colors
{| style="width: 100%" cellspacing="10px"
 * - style="vertical-align: text-top;"
 * style="width: 30%" |

dev.colors.wikia.body
pseudo-color: $body

color of background that surrounds the content area.
 * style="width: 30%" |

dev.colors.wikia.page
pseudo-color: $page

color of article background.
 * style="width: 30%" |

dev.colors.wikia.menu
pseudo-color: $menu

color of menu and button elements.
 * #BACDD8
 * #FFFFFF
 * #006CB0
 * - style="vertical-align: text-top;"
 * - style="vertical-align: text-top;"

dev.colors.wikia.wikia
pseudo-color: $header

color of the Wikia header at the top of the page.

dev.colors.wikia.link
pseudo-color: $link

color of links.

dev.colors.wikia.contrast
pseudo-color: $contrast

color that contrasts with the menu and button color - either white or black.
 * #3A5766
 * #006CB0
 * #FFFFFF
 * - style="vertical-align: text-top;"
 * - style="vertical-align: text-top;"

dev.colors.wikia.text
pseudo-color: $text

color of text in the main article area.

dev.colors.wikia.border
pseudo-color: $border

color of border, frame and separator elements.

dev.colors.wikia.gradient
pseudo-color: $gradient

secondary (bright) color of button elements. Use this to create a gradient with $menu.
 * #3A3A3A
 * #CCCCCC
 * #008BE3
 * }
 * }

Applying the colors
The easiest way to use the above colors is to write regular CSS but use pseudo-colors instead of regular ones:

Add all of these rules to a string and then pass it to dev.colors.css. dev.colors.css will replace all pseudo-values and append the stylesheet to the document head:

Example 1:

You can use an optional second parameter to add pseudo-values of your own. Note that you need to prefix the name of your own values with a $ sign:

Example 2:

Brightness and Darkness
A key part of designing for the various color schemes across Wikia is to determine whether the scheme is bright or dark. dev.colors offers a method for that, but more importantly: It will add two classes to the body tag:


 * 1)   or   - depending on whether the background of menu and buttons is dark or bright
 * 2)   or   - depending on whether the background of the article area is dark or bright

Manipulating Colors
To manipulate color you first need to create a color object. dev.colors provides three Factories:

Once you have a color object you can manipulate it:

Converting Color Objects to Strings
When you've mixed and matched the colors you like, you will want to convert them back into strings so you can use them in CSS:

dev.colors.parse
parameters:


 * 1) color (string)

returns Color object

The paramater may be in
 * hex notation: "#FF0000" or in
 * rgb notation: "rgb(255, 0, 0)" or
 * a color name: "red"

Note that all of the colors in the dev.colors.wikia object are strings as well and need to be parsed into Color objects before you can process them

dev.colors.fromRgb
parameters:


 * 1) red
 * 2) green
 * 3) blue

returns Color object

creates a Color object from the given RGB values. Parameters must be numbers and between 0 and 255

dev.colors.fromHsl
parameters:


 * 1) hue
 * 2) saturation
 * 3) lighness

returns Color object

creates a Color object from the given HSL values. Parameters must be numbers and between 0 and 1