How to hook CSS file according to theme selection in the customizer section

Question

I have added a new area in the Customizer section which allows a user to choose whichever theme colors they want:

But I don't know how to activate/add CSS files according to the selection.

i.e. add green.css if green theme color is selected

or add blue.css if blue theme color is selected.

Answer 1

You can access Customizer values with get_theme_mod(), so you just need to check the value of your setting before enqueueing stylesheets the normal way:

function wpse_310123_enqueue_scheme_css() { $scheme = get_theme_mod( 'theme_scheme' ); if ( $scheme === 'green' ) { wp_enqueue_style( 'theme-green', get_theme_file_uri( 'green.css' ) ); } elseif ( $scheme === 'blue') { wp_enqueue_style( 'theme-blue', get_theme_file_uri( 'blue.css' ) ); } } add_action( 'wp_enqueue_scripts', 'wpse_310123_enqueue_scheme_css' ); 

Note that the above code assumes:

• The name of your Customizer setting is theme_scheme. If it's not, change that to whatever your actual setting is.
• The possible values are green or blue. If they're something else, like green-theme, then make sure to change those.
• Your blue.css and green.css files are in the root folder of your theme. If they're not, add the directories to the file name, eg. get_theme_file_uri( 'assets/css/green.css' ).