Tag: color scheme

SASS/SCSS and Grunt are fantastic tools to organize and automatize css development. With some easy adjustments you can even make grunt to compile your css for multiple color schemes.

Build your base SASS color scheme

The easiest way to prepare your files for auto-compiling SASS color schemes is to create a color variable for every color you want to change in your schemes. You should do that in a separate section of your code, so you can easily copy all color variables and create a new color scheme. The only thing you have to think of is to add the default-attribute to the variables, so they can be overridden. I usually and up wit a section like that in my styles:


/*
 * Default colors
 */

$light: #fafaf9 !default;
$dark: #111111 !default;

$color-1: #ef4f47 !default;
$color-2: #75d9c6 !default;
$color-3: #ffe851 !default;

Preparing additional SASS color schemes

The next step is to create all color scheme files. Create a folder called schemes or something like that put a file with the name color-scheme-1.scss in it. This file should define your color variables again (without the default-attribute) and include all other styles after the variables.

/*
 * Color scheme 1
 */
$light: #efefef;
$dark: #222;

$color-1: red;
$color-2: green;
$color-3: blue;

@import "../style";

Now you can create as much SASS color scheme files as you want, just repeat this pattern in every scheme.

Automated SASS color scheme Grunt task

Finally its time to setup your Grunt tasks. I assume you know how to compile SASS/SCSS via grunt, so the only thing to do is to add a sass-task for every scheme in you grunt-file:


sass: {
    dev: {
        src: 'scss/style.scss',
        dest: 'style.css'
    },
    'color-scheme-1': {
        src: 'scss/schemes/color-scheme-1.scss',
        dest: 'css/color-scheme-1.css'
    },
    'color-scheme-2': {
        src: 'scss/schemes/color-scheme-2.scss',
        dest: 'css/color-scheme-2.css'
    }
},

Now run

grunt sass:color-scheme-1

and you get a color-scheme-1.css file in your css-directory. If you include this file instead of your default style.css, you will get your layout in the schemes colors. Auto generate all schemes with

grunt sass

Download on wordpress.org: Color Scheme every Theme

WordPress 3.4 gave us a tool for theme customization, and I really like the idea. Changing the background color or adding a header image makes even the most downloaded theme on the internet unique. So I had this idea of not only changing the background color, but changing the whole color scheme of a theme and thus building for example a green, red and blue variant of a theme or a dark and a light version. A WordPress color scheme plugin, that would both be great for users, to adjust their downloaded themes, and for theme developers, to provide their themes with multiple color schemes.

Three simple steps to make your own color scheme

  1. Generating the css – The first step, after installing and activating the plugin, is scanning your current theme after color-relevant css. Go to the plugins settings page under Settings -> Color scheme every theme and click the generate button. This will scan all the css files in your current theme after colors, generate code to overwrite the default colors and provide you with a color scheme template to add to your functions.php. After clicking the generate button you will see two textfields. The first with the color scheme template … 
    if ( function_exists( 'cset_add_color_scheme' ) ) {
	cset_add_color_scheme( 'scheme-name', array(
		'$color-1' => '#111111',
		'$color-2' => '#111111',
		'$color-3' => '#111111',
		'$color-4' => '#111111',
		'$color-5' => '#111111',
		'$color-6' => '#111111',
	) );
}

    … and the second with the default colors, found in you theme.

    /**
 * Default colors
 *
 * $color-1: #efefef;
 * $color-2: rgba(0,0,0,0.5);
 * $color-3: rgba(0,0,0,0);
 * $color-4: #fff;
 * $color-5: #000;
 * $color-6: #222;
 */
  2. Adding a scheme to the functions.php – Now you only have to add one or more color schemes to your themes functions.php. Just copy and paste the first code-snippet and change the colors as you like. Allowed are all valid css color definitions, inclusive rgb/rgba and hsl/hsla.
  3. Choosing a scheme – It’s almost done, the last step is going to the customize section of your theme an choosing the color scheme. Click in the admin menu on Appearance -> Themes and then on the Customize link of the current theme.screenshot-1

    Now you should see the schemes you created in the Color Schemes section, choose one and see a live preview to the right and save if you want to publish the new scheme.

Next development steps

This plugin is really not much more than a working prototype. I have some ideas, to make it really great.

  • Making the generator work for other themes than the currently activated (even parent/child themes).
  • Saving color schemes in the options, so there are no changes to the functions.php needed.
  • Generating random color schemes or automatically making the default scheme ‘warmer’ or ‘colder’.
  • Testing, bugfixing and discussing

Troubleshooting

If there is something not working, you are welcome to contact me via the comment section of this article or twitter. But check some things first, to make it easier for me to locate the problem:

  1. Check if your WordPress version is 3.4 or higher and if your PHP version is 4.3.0 or higher.
  2. To overwrite the color scheme of your theme, the plugin does save a file in the wp-content/uploads/ directory. So this directory must have write permissions set.
  3. Set the WP_DEBUG constant in your wp-config.php file to true and see if there are any errors shown when you use the plugin.
  4. Try to deactivate all other plugins. If the problem disappears I have to know which plugins you use, to help.
  5. Give me as much information about your system as possible, when you contact me.

What do you think?

Of course I want to hear what your thoughts and experiences are. Is this plugin usable for you, would you like too see some features it doesn’t have at the moment or do you have some color schemes, you want to share? Please comment or contact me on twitter and let me know what you think!