At Cherry Hill we have begun to use the Flexible Colors module extensively in our client sites. The idea behind Flexible Colors is that color presets can be created for a site so that users or administrators can easily switch between them without touching the theme CSS.
The Challenge
We have a number of sites that are variations on a base theme and color changes are the only customizations that clients often want. It has become tedious to create new Git repositories and add themes or subthemes to them for each new site that only wants simple changes.
We needed a way to make these simple changes without having to commit code.
The Solution
Luckily, Ashok Modi (also known as BTMash), our CTO created and maintains the Flexible Colors module. We started a 2.x branch of the module to address some of our new requirements and continue to develop it as we implement the module into our workflow.
Flexible Colors works by going through the following steps:
- Add a rule for a CSS color property. This involves naming the rule, choosing which color property to affect (background color, border color, outline color, or text color), adding the selector(s) on which to apply the color property, and selecting a default color.
- Add a preset for rules and colors. This involves naming the preset and then selecting a color for each rule by typing in the hexidecimal color code or using the Farbtastic color picker.
- Configure the preset to be used on the site. The new preset will be available on the module configuration page to apply on the site. Custom colors can also be set on the module configuration page that are not saved in a preset.
Updates to Flexible Colors
One of the first updates we made to the 2.x branch of the module was to add exportability for rules and presets. We use this functionality to create a number of color schemes with rules that apply to our commonly used base theme. We export the rules and presets using Features and then are able to use the presets on any site where we enable the feature.
Another enhancement to the module in the 2.x branch is a new color switcher block. The module provides a block for users to switch between presets on the front-end of the site. We use it to demonstrate how the site can look with different color schemes.
Future Plans
Most of the future plans for the module are to make it easier to work with administratively. We want to add the ability to clone presets, which would be useful when only one or two colors need adjusting in a long list of rules, for example. We also plan to adjust some of the styling on the administrative screens to make it easier to scan. And the last item in our plans for now will be to improve the behavior of the Farbtastic color picker when changing colors.
We have been committing our changes to the module on Drupal.org and welcome anyone to submit issues and patches so we can have other perspectives!