How to implement different color schemes in your themes

Question

This question is for theme developers.

I know how to use the settings API to gather input data, but I was wondering what's the best way include the styles.

Let's say you have 4-5 versions of the design, each with its own CSS rules and images. Options:

1. You stuff all the CSS in style.css and trigger the color change trough a body class. In this case you get the browser to load CSS rules and images that are not used (eg. selected option: "red", and you have rules for "blue", "green" as well).

2. Create separate stylesheets for each variant, and enqueue the selected style in the page. This could make the theme hard to maintain, because if you change one CSS file, you need to revise all the others too.

3. Create separate stylesheets for each variant, but only with the extra color styles. So you enqueue a big "common.css" file and the CSS for the selected color scheme (which is small). Here you make an extra HTTP request :P

4. ?

Answer 1

I would put all the common css in the theme's style.css, and create separate stylesheets for the color options.

I would also put color options in their own folder with the images for that style. This way you can keep the filenames the same between color options to make maintaining the code a little easier.

If you wanted to separate common.css from style.css you could @import common.css from the color option's sheet instead of enqueuing it separately.

Answer 2

You could use LESS for that! Define a global stylesheet and one for each color. Set variables for color codes in the color sheets and use them in the global sheet, then @import the global stylesheet into each of the color stylesheets.

Example:

global.less

body{
    background: @bgColor;
}

red.less

@bgColor: red;

@import "global.less";

That gives you one standalone stylesheet per color, so you can go for option 2 but still maintain only one stylesheet! All of the advantages of all options combined, without any of the disadvantages :)