Easily Add Color Support To A Drupal Theme With DesignKit

Posts · 17th June 2013 · 3 comments

Adding color support to a Drupal theme allows site owners/administrators to modify the theme's color scheme directly from a settings page, rather than having to edit any CSS.

Drupal color schemes

I'm currently assessing color integration options for Neptune and have found DesignKit to be a quick, easy, and flexible alternative to direct color module itegration (as used by Garland and Bartik). On the flip side, there are a couple of caveats (see below).

This tutorial will focus on implementing basic color configuration, although DesignKit also supports image configuration and more advanced color configuration (including color blending/shifting).


Setup is a three step process:

  • Step 1: Install the DesignKit module
  • Step 2: Edit the theme's .info file
  • Step 3: Copy and edit designkit.tpl.php

In short:
we use the theme's .info file to define color settings which will appear as fields on the theme's settings page (allowing users to select colors) and we then use a copy of designkit.tpl.php to define what elements should be made what color.

Step 1: Install the DesignKit module

Install DesignKit as per any standard module.

Step 2: Edit the theme's .info file

We'll add two color setting fields - one to select the theme's background color and one to select the theme's link color.

Open the theme's .info file (in this case neptune.info) and append the following:

; DesignKit

; Background color
designkit[color][background][title] = "Background"
designkit[color][background][description] = "Background color."
designkit[color][background][default] = "#ffffff"

; Link color
designkit[color][links][title] = "Links"
designkit[color][links][description] = "Link color."
designkit[color][links][default] = "#488fac"

Now clear the site cache.

Then go to the theme's settings page (/admin/appearance/settings/THEMENAME) and scroll down to the 'Colors' fieldset (which may be collapsed by default).

The color setting fields have been added and clicking on a field exposes a color picker for that particular field.

DesignKit settings

Step 3: Copy and edit designkit.tpl.php

The DesignKit module folder contains a designkit.tpl.php file. Copy this file into your theme folder. Open the copied designkit.tpl.php file and add the following:

body {
  background: <?php print $background; ?>;
a {
  color: <?php print $links; ?>;

When this file is processed, any PHP variable (e.g. $background) whose name matches that of a color setting defined in the theme's .info file (in step 2) will be replaced with the corresponding color setting's value (e.g. #ffffff).

That's it! Now clear the site cache again and test.


Unlike direct color module integration, DeisgnKit doesn't currently support color scheme presets or show a preview on the theme settings page (although setting up a preview is a more custom process anyway, as the preview would likely want to reflect an individual theme).

DeisgnKit also outputs its CSS (generated from designkit.tpl.php) in a <style> block directly in the <head> and not in a linked stylesheet. There is an open issue regarding this.


Drupal Theme Garden1st July 2013 @ 4:57pm

Nice article, but ...
Aren't linked stylesheet better approach than style-block in the head?

samuel sandeeep30th July 2013 @ 11:27am

Nice article, thanks for sharing this information.Looking forward for more posts like this.

peter7th March 2014 @ 2:12pm

nice article

Comments are closed

If you want to ask a question or have something to add please contact me.