The color module allows the administrator to easily change the color scheme of themes that support it. This facilitates a fresh look for the site without having to create a new theme or sub-theme. Drupal's default theme, Garland, supports the color module and, in this recipe, we will be covering the steps required to change its color scheme to something unique.
Ensure that the color module is enabled in admin/build/modules (Home | Administer | Build | Modules). Since we are going to change the color scheme of the Garland theme, ensure that it is set as the current theme.
Colorizing the Garland theme can be accomplished by following these steps:
- Navigate to
admin/build/themes(Home | Administer | Build | Themes). - Look for the Garland theme and click on the configure link next to it.
- Look for the section titled Color scheme.
- In this section, the Color set drop-down lists available presets. Choosing any of the presets will change the color scheme of the preview section further below.
- Once satisfied, click on the Save configuration button at the bottom of the page to save our changes.
The color module works by generating stylesheets using the new color scheme which effectively replace the existing stylesheet during runtime. The generated CSS file is stored in the site's files directory in a folder named color. In addition to the stylesheets, the color module, when configured correctly as with the Garland theme, can also blend the theme's image assets to suit the new color scheme.
Note
The color module creates a new stylesheet which is a customized copy of the theme's original CSS file. Since it is a copy, fixes and updates to the original file are not automatically propagated to it. Therefore, whenever changes are made to the original file, It is recommended that the stylesheet be regenerated by simply saving the customized color settings once again.
We are not restricted to the inbuilt presets provided by the color module and can also create our own.
If the provided presets are unsatisfactory, clicking on the textfields below the drop-down will allow further customization. Once a textfield has focus, the color wheel on the right can also be clicked and used to select different palettes at will. These new settings are saved as the Custom preset as demonstrated in the following screenshot:
