We spent a few hours trying to figure out how to use Color to make our custom Drupal 6 theme configurable. Color rewrites your CSS to include the user-configured colours, and adds the resulting stylesheet link to your header.

The first trick was to get the colour picker to show up on the theme settings page. The documentation wasn’t clear, but the easiest way to get started seems to be to copy the color/ directory from the Garland theme into a subdirectory of your theme, and then customize it from there. You will also need to follow the Drupal 6 or Drupal 7-specific instructions for calling the Color module when preprocessing pages.

Color searches your style.css (and imported stylesheets or other stylesheets defined by the ‘css’ part of your $info array) for colour definitions. Any colour that exactly matches one of the colours defined in the default scheme is replaced by the colour in the selected scheme, with the caveat that the base colour should not appear in the stylesheet. If the base colour is found in the stylesheet, it will be replaced by an empty string. In your stylesheet, make sure your base colour uses the shortened version (ex: replace #cccccc with #ccc) or use a very similar colour instead (ex: #cbcbcb).

So, the easy way to colourize your theme:

1. Enable Color, if you haven’t yet.
2. Copy the color directory from the Garland theme into your theme

Color will attempt to figure out unspecified colours based on those colours’ relationship with the base colour. This can lead to interesting combinations. If there are colours you do not want Color to change, put them in a section after a comment like this:

/*******************************************************************
* Color Module: Don't touch *
*******************************************************************/

All colours specified after that comment will not be rewritten.

Some gotchas to watch out for:

• It’s probably a good idea to add a comment to your style.css reminding developers to resubmit the colour settings after making changes to the stylesheet. Color rewrites the stylesheet, so changes aren’t picked up until the stylesheet is regenerated.
• The Color preview appears to use hardcoded HTML. The gradient is created by color.js, and there doesn’t seem to be a way around it. Our workaround is to use CSS to hide both the preview and the header above it. Unfortunately, there is no div that encloses both the header and the preview.