
Hi Caitlin,
The Background Color option is a core WordPress setting and therefore doesn't set a LESS variable. However you may do it yourself by using the snippet from this thread and add a few extra steps:
- We have to change the Core
background_color
optiontransport
argument torefresh
so that the preview refresh on when the color changes which is required when setting LESS variables. - Add the option value to the
example_get_customizer_settings()
- Set the variable in
example_get_dynamic_less()
Here is the complete snippet including the other variables you posted in your snippet:
add_action( 'customize_register', 'example_customizer_fields' );
/**
* Register customizer fields.
*
* @param WP_Customize_Manager $wp_customize WP_Customize_Manager instance.
*/
function example_customizer_fields( $wp_customize ) {
$fields = array(
array(
'id' => 'text_color',
'label' => __( 'Text Color', 'tm-beans' ),
'type' => 'WP_Customize_Color_Control',
'default' => '#000',
),
array(
'id' => 'footer_background',
'label' => __( 'Footer Background Color', 'tm-beans' ),
'type' => 'WP_Customize_Color_Control',
'default' => '#000',
),
);
beans_register_wp_customize_options( $fields, 'colors' );
// Modify the core background color transport.
$wp_customize->get_setting( 'background_color' )->transport = 'refresh';
}
add_action( 'beans_uikit_enqueue_scripts', 'example_uikit_enqueue_assets', 5 );
/**
* Enqueue the function return the dynamic LESS.
*/
function example_uikit_enqueue_assets() {
beans_compiler_add_fragment( 'uikit', 'example_get_dynamic_less', 'less' );
}
add_filter( 'beans_uikit_euqueued_styles_args', 'example_add_compiler_cache_version' );
/**
* Enqueue the function return the dynamic LESS.
*
* @param array $args An array of UIkit style compiler arguments.
*
* @return array An array of UIkit style compiler arguments.
*/
function example_add_compiler_cache_version( $args ) {
$args['example_version'] = md5( @serialize( example_get_customizer_settings() ) );
return $args;
}
/**
* Getter for customizer settings.
*/
function example_get_customizer_settings() {
return array(
'text_color' => get_theme_mod( 'text_color', '#000' ),
'footer_background' => get_theme_mod( 'footer_background', '#000' ),
'global_background' => '#' . get_background_color(),
);
}
/**
* Getter for dynamic LESS.
*/
function example_get_dynamic_less() {
$settings = example_get_customizer_settings();
// LESS ouptut below. This may move in a `style.php` which can be included here.
return '
@global-text-color: ' . esc_html( $settings['text_color'] ) . ';
@global-footer-background: ' . esc_html( $settings['footer_background'] ) . ';
@global-background:' . esc_html( $settings['global_background'] ) . ';
';
}
Note how we change the Core Background Color transport in example_customizer_fields()
(at then end of the function) so that the preview refresh on change which is used to recompile the CSS. The color is assigned to @global-background
variable which you may change if need be.
Happy coding,