I'm developing a new WordPress theme and I'm at the point where I'm adding theme customizer options. Most of them have been surprisingly easy to implement, but I'm stumped on a couple of important options:

  1. Switching between a light and dark theme
  2. Switching between two web font choices

I understand how to properly enqueue stylesheets and scripts and I'm getting pretty familiar with how to add settings, sections and controls to the Theme Customizer. What I need now is a way to conditionally load stylesheets (the light/dark skins) and scripts (the web fonts).

How can I do something like this?

// if the skin is set to 'light'
     // enqueue light.css
// if the skin is set to 'dark'
     // enqueue dark.css


// if the font style is set to 'sans-serif'
     // enqueue source-sans-pro;
// if the font-style is set to 'serif'
     // enqueue merriweather;
  • Ask only one question per Question, unless they are really closely related. I never played with the theme customizer, but if I wanted to know what's the current skin, making a call in some function in a plugin, how would it be? What's the code you're using for the regular enqueue? . . . You're free to edit the Question whenever needed.
    – brasofilo
    Sep 22, 2013 at 0:46
  • Sorry about that. I thought it was closely related since 'mytheme_skin' is the one of the settings my main question was about. If you don't think the relation is close enough, I'd be happy to remove that and post it as a separate question. :) Sep 22, 2013 at 1:29
  • It would appear you are looking for get_theme_mod() - this should allow you to read your mytheme_skin setting, and enqueue the appropriate script / css based on the setting. Sep 22, 2013 at 1:35

2 Answers 2


Got it! Here's the code that worked for me.

-- Theme Customizer settings and controls (mine are in a separate customizer.php file):

function themename_customize_register( $wp_customize ) {


    $wpcustomize->add_setting( 'themename_skin', array(
        'default' => 'light',

    $wp_customize->add_control( 'themename_skin', array(
        'label'    => 'Skin',
        'section'  => 'colors',
        'settings' => 'themename_skin',
        'type'     => 'radio',
        'choices'  => array(
            'light' => 'Light',
            'dark'  => 'Dark',



add_action( 'customize_register', 'themename_customize_register' );

-- Enqueue the light/dark stylesheets in functions.php along with your other scripts/styles:

function themename_scripts() {


    /* Enqueue the appropriate CSS based on which skin is selected via Theme Customizer */
    $skin = get_theme_mod( 'themename_skin' );

    if ( $skin == 'light' ) {
        wp_enqueue_style( 'themename-light-skin', get_template_directory_uri() . '/skins/light.css' );
    if ( $skin  == 'dark' ) {
        wp_enqueue_style( 'themename-dark-skin', get_template_directory_uri() . '/skins/dark.css' );



add_action( 'wp_enqueue_scripts', 'themename_scripts' );

Thanks to cale_b for pointing me in the right direction.


Try this...

//add your stylesheet url to a variable
$light = 'path to light css';
$dark = 'path to dark css';

add_action('wp_enqueue_scripts', 'theme_color_switcher');

function theme_color_switcher() {

// switch the stylesheet registration
// if light is not blank
if ($light !='') :
// then register the light color
wp_register_style('stylesheet_id', $light);

else :
// else register the dark color
wp_register_style('stylesheet_id', $dark);


Please make sure that you add your theme ability to delete the variable $light when it is not selected, or your theme will only register the light theme.

You can also create two functions and hooks to include the stylesheets and put the action hook inside the 'if else' statement like this:

if ($dark !='' ) :
add_action('wp_enqueue_scripts', 'darktheme_function_callback');
else :
add_action('wp_enqueue_scripts', 'lighttheme_function_callback');

//register and enqueue you dark css
// register and enqueue your light css

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.