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

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.

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' ).