Tips and Tricks
When you get an ‘undefined index’ warning, make sure the mentioned key is present in your color.inc info array.

Important: Only if the color in your $info[‘css’] file that you want to change with the palette in the drupal color picker is preset in the colors.inc default scheme and the hex value exactly matches the hex value in the css file, will the color.module overwrite your css file settings.

Note: when testing and making changes to your regular colors.css file, you must regenerate the color.module’s copy of the colors.css file before you will see the changes, as color.module will look for the generated $info[‘css’] and ignore your original css.

Tricking the Color.Module: The color module will only pick up id identifiers and not class identifiers. So we need to ‘trick’ the color module by including a fake id and supplementing the fake id with the real class value. For instance, when using mega menus, the css .megamenu-parent represents the tabs of the megamenu. When you want to theme the tabs in the color.module you will need to do something as follows:

#megamenu-parent,
.megamenu-skin-tradecard-megamenu .megamenu-parent {
background-color: #f53724;
}

The #megamenu-parent then only serves to link the color.inc reference in the info[‘fields’] and info[‘schemes’][‘default’].

'megamenu-parent' => t('Megamenu Tab'),
'megamenu-parent' => '#f53724',


Note: that the color.module requires your default hex color values to be unique, as they also serve to look up colors by key. So make sure that each field in the info[‘schemes’][‘default’] array have a unique hex color value. In the following code changing nav-bin1’s color will also overwrite nav-bin2’s color settings in the generated css file.

'nav-bin1' => '#9ff041',
'nav-bin2' => '#9ff041',


Preview
Add the preview.js to the color.inc settings in the info.array.

'preview_js' => 'color/preview.js',


In preview.js you can add the JavaScript to change preview colors to custom tags instantly.


(function ($) {
Drupal.color = {
logoChanged: false,
callback: function(context, settings, form, farb, height, width) {
// For a color setting for Navigation Bar and Tabs
var nav_bar = $('#palette input[name="palette[nav-bar]"]', form).val();
$('#nav-bar, #preview-headernavigation', form).attr('style', "background-color: " + nav_bar);
var nav_tabs = $('#palette input[name="palette[nav-tabs]"]', form).val();
$('#nav-tabs, li.preview-megamenu-parent, li.preview-megamenu-parent h2', form).attr('style', "background-color: " + nav_tabs);

Color.Module
Code excerpts from the color.module.

function color_scheme_form_submit($form, &$form_state) {
[..]
// Rewrite stylesheet with new colors.
$style = _color_rewrite_stylesheet($theme, $info, $paths, $palette, $style);
[..]
}
function _color_rewrite_stylesheet($theme, &$info, &$paths, $palette, $style) {
[..]
$style = preg_split('/(#[0-9a-f]{6}|#[0-9a-f]{3})/i' [..];
foreach ($style as $chunk) {
[..]

The $chunk are lines read from the css file defined in the $info[‘css’] array up to the “Color Module: Don’t touch” comment.