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:
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).
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.
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
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.
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 :)
common.cssbe included in the theme's
style.css? If I were doing it, I would put all the common css in the theme's
style.css(that's what it's for, right?), and create separate stylesheets for the color options. If you wanted to separate
@import common.cssfrom the color option's sheet instead of enqueuing it separately.