change background color of custom categories

this need some hardcoding. you could refer to mesodark theme that use similar color block for main nav. maybe try add this to functions.php, have’t test it tho

remove_action('wp_head','meso_custom_category_style_init');       
/*-----------------------------------------------------
Description: Add new category color block for main nav
-----------------------------------------------------*/
function meso_blk_category_style_init() {
print '<style type="text/css" media="all">' . "\n";
$cat_color_cache = '';
$taxonomies = dez_get_all_taxonomy();
$args = array('orderby'=>'name','order'=>'ASC');
$tax_terms = get_terms($taxonomies, $args);
foreach ($tax_terms as $tax_term) {
$cat_id =  $tax_term->term_id;
$cat_value_option = 'tn_cat_color_' . $cat_id;
$cat_color_option = get_theme_mod('cat_color_'.$cat_id);
if( $cat_color_option ) {
$cat_color_cache .= '#main-navigation li.'. $cat_value_option . ' a {border:0 none;background-color: '. $cat_color_option . ';}#main-navigation ul.sf-menu li.'.$cat_value_option. ':hover {background-color: '.$cat_color_option. ';}#main-navigation li.'.$cat_value_option.'.current-menu-item a {background-color: '.$cat_color_option.';color:white;}#main-navigation li.'.$cat_value_option.'.current-menu-item a span.menu-decsription {color:white;}ul.sub_'.$cat_value_option.' li a {color: '.$cat_color_option.';}#main-navigation .sf-menu li a:hover {color: #fff !important;}#custom #main-navigation .sf-menu li.'.$cat_value_option.' a:hover {color: #fff !important;background-color: '.$cat_color_option.';}aside.home-feat-cat h4.homefeattitle.feat_'.$cat_value_option.' {border-bottom: 5px solid '.$cat_color_option.';}h2.header-title.feat_'.$cat_value_option.' {background-color: '.$cat_color_option.';padding: 1% 2%;width:95%;color: white;}#custom .archive_'.$cat_value_option.' h1.post-title a,#custom .archive_'.$cat_value_option.' h2.post-title a {color: '.$cat_color_option.' !important;}aside.home-feat-cat.post_'.$cat_value_option.' .widget a, aside.home-feat-cat.post_'.$cat_value_option.' article a {color: '.$cat_color_option.';}aside.home-feat-cat.post_'.$cat_value_option.' .feat-right a:hover{color: '.$cat_color_option.';}#custom #post-entry.archive_'.$cat_value_option.' article .post-meta a:hover {color: '.$cat_color_option.' !important;}#main-navigation .sf-menu li.'.$cat_value_option.' ul  {background-color: '.$cat_color_option.';background-image: none;}#main-navigation .sf-menu li.'.$cat_value_option.' ul li a:hover  {background-color:'.dehex( $cat_color_option, -20 ).';background-image: none;}';
}
}
echo $cat_color_cache;
print '</style>' . "\n";
}
add_action('wp_head','meso_blk_category_style_init');

Yes that has worked perfectly, thank you so much!