This is a tutorial how you can easily take advantage of Color module on your custom theme on Drupal 7.

Color is a module that comes with the Drupal core. It offers very nice re-coloring of your theme with minimal coding.

Many popular themes are taking advantage of the Color module, such as AdaptiveTheme, BlogBuzz, Pixture Reloaded, RootCandy, Sky and multiple others.

Part 1: Basic Color module settings

This is the basic configuration part of your friendship with Color and will only handle the background color/text color changes. The Part 2 (coming up!) will take your relationship with Color into a more intimate level.

So let's get started with the basics. Since Color comes with the Drupal core, it's very humble with requirements. Here are the only things that you really need:

• A custom theme
• Color module enabled
• Few lines of code

There's an archive attached at the bottom of the post with the implementation that I'm going to create here. I suggest you to read through this and then download it.

I have a simple theme that looks like this by default. I'm going to add Color module's functionality in it and guide you through it:

Step 1. If you don't have a custom theme, create one. It's easy. I will be using my custom theme called ss in this tutorial.

Step 2. Create a directory called color into your custom theme directory (I have: sites/all/themes/ss/color).

Step 3. Add file called color.inc to the color folder (I have: sites/all/themes/ss/color/color.inc).

Step 4. Add a image file called base.png to the color folder. We don't use this on the basic configuration but Color requires it. You can copy one from the attached archive at the end of this post or here.

Step 5. Create a CSS file called colors.css into your theme's directory where you have your CSS styles located (I have: sites/all/themes/ss/styles/colors.css) Note: We could also use the theme's default stylesheet that you might have, but I prefer to keep Color module stuff in it's own file.

Now your theme directory should look something like this:

Step 6. Lets roll and add some color configurations to the color.inc file. To keep it simple: Now we're creating a simple array called $info that contains all the information that we want to give for Color.

First, lets define the possible replacing patterns for the user to choose. Simple key => value pairs with translatable label through t().

<?php

/**
 * PART 1. Basic Color module settings
 */

$info = array();

// Define the possible replaceable items and their labels.
$info['fields'] = array(
  'bg' => t('Main background'),
  'link' => t('Link color'),
  'text' => t('Text color'),
  'titles' => t('Titles'),
  'menu_item_color' => t('Menu item link color'),
  'menu_item_a_bg' => t('Menu active item background color'),
  'menu_item_a_color' => t('Menu active item link color'),
);

Step 6.1. Then let's define the color schemes for the site. Keys in here are the same ones that were used above. The Hex color code values (for example #ffffff for white, #ff7f00 for orange, etc) are the values that the Color module is going to replace from our CSS file (will be defined later). Good note by Kristi: Use should use only lowercase letters, otherwise Color won't pick up your colors correctly.

Here we have two schemes defined, one called default (Our site default colors) and one called drupal_love (Drupal Love).

// Color schemes for the site.
$info['schemes'] = array(
  // Define the default scheme.
  'default' => array(
    // Scheme title.
    'title' => t('Our site default colors'),
    // Scheme colors (Keys are coming from $info['fields']).
    'colors' => array(
      'bg' => '#ffffff',
      'link' => '#ff7f00',
      'text' => '#777777',
      'titles' => '#333333',
      'menu_item_color' => '#666666',
      'menu_item_a_bg' => '#eeeeee',
      'menu_item_a_color' => '#000000',
    ),
  ),
  // Let's create a scheme called Drupal Love.
  'drupal_love' => array(
    // Scheme title.
    'title' => t('Drupal Love'),
    // Scheme colors (Keys are coming from $info['fields']).
    'colors' => array(
      'bg' => '#008CFF',
      'link' => '#ffffff',
      'text' => '#ffffff',
      'titles' => '#ffffff',
      'menu_item_color' => '#000000',
      'menu_item_a_bg' => '#ffffff',
      'menu_item_a_color' => '#000000',
    ),
  ),
);

Step 6.2. Now it's time to add the stylesheet into the mix. Remember the colors.css we created couple steps back? (I have sites/all/themes/ss/styles/colors.css). We have to inform the Color module that this is the file we want it to use. This also goes to the color.inc:

// Define the CSS file(s) that we want the Color module to use as a base.
$info['css'] = array(
  'styles/colors.css',
);

Step 7. Your theme should also be aware that there's a new stylesheet. Add this into your theme's .info file (I have sites/all/themes/ss/ss.info).

; Add our stylesheet for the Color module to override.
stylesheets[all][] = styles/colors.css

Step 8. CSS properties. Pretty simple styles, just for the body and menu item backgrounds and some text colors.

Note: The Hex color codes are the same than the ones we defined in the previous step's default scheme.

/* Site background color */
body { background-color: #ffffff; color: #777777; }

/* Lists */
ul,
li,
ul li.collapsed,
ul li.expanded,
ul li.leaf {
  color: #777777;
}

/* Site titles */
h1, h2 { color: #333333; }

/* Main content area links */
#main-content a:link,
#main-content a:visited,
#main-content a:hover,
#main-content a:focus,
#main-content a:active { color: #ff7f00; }

/* Main menu links */
#site-menu ul li a { color: #666666; }

/* Main menu active links */
#site-menu ul li.active-trail a,
#site-menu ul li a.active { background: #eeeeee; color: #000000; }

Step 9. Add the Color module altering scripts into your template.php file (I have sites/all/themes/ss/template.php). If you don't have this file, you should create it. Replace the YOURTHEMENAME occurrences with the name of your theme.

<?php

/**
 * Implements template_process_html().
 *
 * Override or insert variables into the page template for HTML output.
 */
function YOURTHEMENAME_process_html(&$variables) {
  // Hook into color.module.
  if (module_exists('color')) {
    _color_html_alter($variables);
  }
}

/*
 * Implements template_process_page().
 */
function YOURTHEMENAME_process_page(&$variables, $hook) {
  // Hook into color.module.
  if (module_exists('color')) {
    _color_page_alter($variables);
  }
}

Step 10. Advanced options. We are not going to get deeper into the advanced options in this chapter, but we must give Color some default values for these. Otherwise it's going to be angry and throw up a tons of errors.

We're handling these settings more in the Part 2 (coming up!). I strongly recommend to take a peek of those settings in that chapter. If you want to just mess around with your site background colors, you can just copy this stuff here to your color.inc file and leave it there.

/***** Advanced Color settings - Defaults. Will be used in the Part 2. *****/

/**
 * Default settings for the advanced stuff.
 * No need to edit these if you just want to play around with the colors.
 * Color wants these, otherwise it's not going to play.
 *
 * We dive deeper into these in the Part 2. Advanced Color settings
 */

// Files we want to copy along with the CSS files, let's define these later.
$info['copy'] = array();

// Files used in the scheme preview.
$info['preview_css'] = 'color/preview.css';
$info['preview_js'] = 'color/preview.js';
$info['preview_html'] = 'color/preview.html';

// Gradients
$info['gradients'] = array();

// Color areas to fill (x, y, width, height).
$info['fill'] = array();

// Coordinates of all the theme slices (x, y, width, height)
// with their filename as used in the stylesheet.
$info['slices'] = array();

// Base file for image generation.
$info['base_image'] = 'color/base.png';

Step 11. You need to clear the caches of your Drupal site and let your theme know about the new files. Head to your site's Performance section (admin/config/development/performance) and click the 'Clear all caches' button.

Step 12. Enable the Color module if you already haven't.

Step 13. Visit your theme settings page (I have admin/appearance/settings/ss). Now the Color module has detected that you have it's stuff in your theme directory, and is showing you the color picker:

Step 14. Ready. Now you can select from your predefined schemes or with just a couple of clicks, you can turn your site into a pink dream!

P.S. If you have issues with the fields not appearing correctly at the settings form, take a look at Theme settings form should include newly added colorable elements.