Background Color LESS Variable

SUPER simple question - I can't seem to determine the LESS variable for the customizer's original BG color included with Beans. Seems like it should be so obvious, but I've checked all the files and docs. Want to use that same color for a few more elements!

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:

1. We have to change the Core background_color option transport argument to refresh so that the preview refresh on when the color changes which is required when setting LESS variables.
2. Add the option value to the example_get_customizer_settings()
3. 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,