Adding the CSS for a Color Scheme in the Theme Customizer

In the first part of this two part series, Rachel McCollin showed you how to create the settings and controls for a color scheme in the WordPress theme customizer. In this part, you'll use these to define CSS in the theme based on what users select using the customizer. You could easily take this further - perhaps by using radio buttons to provide layout options or by giving users a choice as to which colors from their scheme are used where. She would warn against making things too complicated though - in her opinion, the benefit of this approach is that it keeps things simple.

This consists of four steps:

1. Defining a variable based on each of the options your users select in the customizer
2. Using the value of these variables to define CSS
3. Adding classes to the body element based on the radio box selections in your 'Solid Backgrounds' section
4. Using these classes to define the CSS for the header and footer.

We'll start by defining variables for the colors.