Add the following to the functions.php
function mytheme_costumizer_register($wp_customize) {
$wp_customize->add_section('theme_colors', array(
'title' => __('Colors', 'blankslate'),
'description' => 'Modify the website colors'
));
$wp_customize->add_setting('dark_backgrounds', array(
'default' => '#302d2c',
));
$wp_customize->add_setting('light_backgrounds', array(
'default' => '#ffffff',
));
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize,'dark_backgrounds', array(
'label' => __('Edit Dark Backgrounds', 'blankslate'),
'section' => 'theme_colors',
'settings' => 'dark_backgrounds'
) ));
$wp_customize->add_control( new WP_Customize_Color_Control($wp_customize,'light_backgrounds', array(
'label' => __('Edit light Backgrounds', 'blankslate'),
'section' => 'theme_colors',
'settings' => 'light_backgrounds'
) ));
}
add_action('customize_register', 'mytheme_costumizer_register');
Then call the CSS
function mytheme_css_customizer() {
?>
<style type="text/css">
.dark_background {
background: <?php echo get_theme_mod('dark_backgrounds'); ?>;
}
.light_background {
background: <?php echo get_theme_mod('light_backgrounds'); ?>;
}
</style>
<?php
}
add_action('wp_head', 'mytheme_css_customizer' );