Thesis Color Picker with ColorScale Technology

The Thesis color picker with ColorScale technology is a tool that Skin developers can add to their design options. Because it’s part of the Skin API, the color picker can be added to any Skin with ease.

To add the picker to your Skin, simply set one of your design options like this:

protected function design() {
	return array(
		'colors' => $this->color_scheme(/* color scheme array */));
}

In the above snippet, the color scheme is assigned to the 'colors' option. The particulars of the resulting color scheme are dependent upon the color scheme array, which we’ll look at now.

Thesis Color Scheme Array Format

The Thesis Skin API color scheme method, $this->color_scheme(), accepts an array with up to 6 parameters:

  • 'id' — color scheme ID
  • 'colors' — array containing color 'option_id' values and their intended uses (e.g. “Primary Text”)
  • 'default' — array of default color scheme values
  • 'scale' — (optional) array to initiate ColorScale technology
  • 'label' — (optional) color scheme label (default is “Color Scheme”)
  • 'tooltip' — (optional) color scheme tooltip

Note that the first 3 parameters are required, while the last 3 are optional. To get a better idea of how these parameters work, let’s look a sample color scheme array similar to the one found in the Classic Skin:

array(
	'id' => 'colors',
	'colors' => array(
		'text1' => __('Primary Text', $this->_class),
		'text2' => __('Secondary Text', $this->_class),
		'links' => __('Links', $this->_class),
		'color1' => __('Borders & Highlights', $this->_class),
		'color2' => __('Interior BGs', $this->_class),
		'color3' => __('Site BG', $this->_class)),
	'default' => array(
		'text1' => '111',
		'text2' => '888',
		'links' => 'd00',
		'color1' => 'ddd',
		'color2' => 'eee',
		'color3' => 'fff'),
	'scale' => array(
		'links' => '808080',
		'color1' => 'ddd',
		'color2' => 'eee',
		'color3' => 'fff'));

The color scheme array defined above uses 4 of the 6 available parameters. The first three—'id', 'colors', and 'default'—are sufficient to produce a color scheme picker that includes complementary color functionality.

The addition of a fourth parameter, the 'scale' array, takes this color scheme picker to a new level by adding a Thesis ColorScale.

Thesis ColorScale

The color 'option_id' names indicated in the 'scale' array will have a Thesis ColorScale applied to them whenever a swatch is selected in the ColorScale swatch picker.

Note: The hexadecimal color values supplied in the 'scale' array should represent colors along the grayscale line! See this “Shades of Gray” section for some of the 256 valid hexadecimal grayscale values.

Also note that you could easily scale all the colors in your scheme; in this case, only four of the colors get “scaled,” but that was an editorial decision for the Classic Skin.

(Technically, only 3 of the colors get scaled here because 'color3' is set to pure white, which cannot be translated into the color space.)

Finally, in this case, there is no need for the fifth and sixth parameters, so those are simply omitted from the color scheme array altogether.