How to make CSS load live based on options clicked in the theme customizer?

Question

I have a problem. I am trying get the theme customizer load a different CSS file based on what radio input in clicked, live!

It works so far right now that option is saved when I click "Save & Publish" it only loads up when manually reload the entire customizer page. The preview panel is refreshed on select but not loads the selected CSS up and I don't know what actually makes Twenty Eleven do this but I like to have it this say too.

I have looked at the Twentyeleven theme to code this. The differences are:

• The theme uses option for the settings and not theme_mod for it
• It has some settings handling but I think that's for its separate theme options page, I do not want that.
• It uses enqueue scripts to add its 'dark' theme on top of the normal theme and it's actually applied live if one clicks it, this is what I like to have too.

How would I do this? Not sure how this actually works, it seems to store the option temporary only for the customizer and refresh it with the enqueued dark theme.

I would be glad if you could help me figure out how to apply the CSS on the Customizer preview.

For reference: Twentyeleven theme-options.php

Here is the slimmed down version of of my plugin.

<?php
/**
 * Plugin Name: S Skins
 * Plugin URI: 
 * Description: 
 * Version: 1.0
 * Author: 
 * Author URI: 
 * License: GPLv3+
 */

add_action( 'plugins_loaded', array( 'S_Color_Themes', 'get_instance' ) );

class S_Color_Themes {

    /**
     * Plugin version, used for cache-busting of style and script file references.
     *
     * @since   2.6.0
     *
     * @var     string
     */
    const VERSION = '1.0.0';

    /**
     * Unique identifier for your plugin.
     *
     *
     * The variable name is used as the text domain when internationalizing strings
     * of text. Its value should match the Text Domain file header in the main
     * plugin file.
     *
     * @since    1.0.0
     *
     * @var      string
     */
    protected $plugin_slug = 's-color-themes';

    public $color_themes = array();

    /**
     * Instance of this class.
     *
     * @since    1.0.0
     *
     * @var      object
     */
    protected static $instance = null;

    /**
     * Initialize the plugin by setting localization and loading public scripts
     * and styles.
     *
     * @since    2.6.0
     */
    private function __construct() {

        $this->get_color_themes();

        if ( is_admin () ) {
            add_action( 'customize_register', array( $this, 'wp_customize_register' ) );
        }

        add_filter( 'stylesheet_uri', array( $this, 'stylesheet_uri' ), 10, 2 );
    }

    /**
     * Return the plugin slug.
     *
     * @since    1.0.0
     *
     *@return    Plugin slug variable.
     */
    public function get_plugin_slug() {
        return $this->plugin_slug;
    }

    /**
     * Return an instance of this class.
     *
     * @since     1.0.0
     *
     * @return    object    A single instance of this class.
     */
    public static function get_instance() {

        // If the single instance hasn't been set, set it now.
        if ( null == self::$instance ) {
            self::$instance = new self;
        }

        return self::$instance;
    }

    public function stylesheet_uri( $stylesheet, $dir_uri ) {

        $color_theme = apply_filters( 's_color_theme', get_theme_mod( 's_skin' ) );

        if ( empty( $color_theme ) || 'default' == $color_theme || ! is_file( get_stylesheet_directory() . "/style-$color_theme.css" ) ) {
            return $stylesheet;
        }

        return "$dir_uri/style-$color_theme.css";
    }

    public function wp_customize_register( $wp_customize ) {

        #remove_theme_mod( 's_skin' );

        $wp_customize->add_setting( 
            's_skin', 
            array(
                'default'    => '',
                'type'       => 'theme_mod',
                'capability' => 'edit_theme_options',
            )
        );

        #show($color_theme_names);

        $schemes = array();
        $choices = array();
        foreach ( $this->color_themes as $color_theme ) {

            $schemes[$color_theme] = array(
                'value' => $color_theme,
                'label' => ucfirst( $color_theme ),
                'thumbnail' => get_template_directory_uri() . '/images/color-theme-thumbnails/' . $color_theme . '.png'
            );

            $choices[ $color_theme ] = ucfirst( $color_theme );
        }

        $wp_customize->add_section(
            's-color-themes',
            array(
                'title'     => 'Color Themes',
                'priority'  => 1,
            )
        );

        $wp_customize->add_control( 's_skin', array(
            #'label'    => __( 'Color Scheme', $this->plugin_slug ),
            'section'  => 's-color-themes',
            'settings' => 's_skin',
            'type'     => 'radio',
            'choices'  => $choices,
            #'priority' => 5,
        ) );

    }

    public function get_color_themes() {

        $color_theme_files = glob( get_stylesheet_directory() . "/style-*.css" );

        if ( empty( $color_theme_files ) ) {
            return false;
        }

        $this->color_themes = array( 'default' );

        foreach ( $color_theme_files as $file ) {
            $this->color_themes[] = str_replace( array( get_stylesheet_directory() . '/style-', '.css' ), '', $file );
        }
    }
}

Answer 1

Why don't you create a JavaScript which will listen for change. When you click what you should click you just change the CSS with JS or add some class.

So like that when you click SAVE it will work and you will have live preview.

Answer 2

To solve this I had to call

add_action( 'customize_register', array( $this, 'wp_customize_register' ) );

directly rather then inside the if admin condition and now everything works fine simple and easy without JavaScript.