How to Change CSS Colors from Custom Plugin Settings Page

Question

I have a custom WordPress plugin with a variety of settings that I use across multiple websites. I also use a few of the same 3rd party plugins across all of those pages. I would like to be able to stylize them the same way, but with different colors. While I could add CSS to every site, it is difficult for some of our non-techy admins to go through the CSS and change the hex codes on the correct classes. I am trying to figure out the best way to do this. Here is what I've looked into so far:

• I understand that I could change classes with PHP, but I can't change the classes on 3rd party plugins this way.
• Doing it with JS is annoying to watch the page load with default colors and the switch after a second.
• Tried turning a CSS file into a PHP file with a CSS type header, but it doesn't seem to work unless I also update the htaccess file. I don't want to do that for every site, and I see plugins changing other plugin colors all the time, so I know it's possible without changing the htaccess file.
• I tried adding style via PHP inside and outside of a function, but I get errors if it's outside of a function, and with it inside of a function nothing happens:

add_action( 'init', 'getCssOptionsUM' );
function getCssOptionsUM(){
   // ACCOUNT PAGE: Menu Background Color
   if (get_option('eri_um_account_menu_bg') != '') {
       echo '<style>.um-account-side li { background: '.get_option('eri_um_account_menu_bg').' !important; }</style>';
   }
   // ACCOUNT PAGE: Menu Background Hover Color & Text Hover Color
   if (get_option('eri_um_account_menuh_bg') != '') {
       echo '<style>.um-account-side li:hover > a, .um-account-side li:hover > a .um-account-icontip {background: '.get_option('eri_um_account_menuh_bg').' !important; }</style>';
   }
   if (get_option('eri_um_account_menuh_txt') != '') {
       echo '<style>.um-account-side li:hover > a, .um-account-side li:hover > a .um-account-icontip { color: '.get_option('eri_um_account_menuh_txt').' !important; }</style>';
   }
}

By the way, I am sure that the options page is saving the data.

Any suggestions?

Answer 1

Nevermind, the last option was actually working, but in my own CSS code I found that I was overriding it. I cleaned up my CSS and it's working with the function I posted above. I also found an alternative method using wp_add_inline_style() which got me to look at my CSS code in more depth. Example code below:

function wpdocs_styles_method() {
    wp_enqueue_style(
        'custom-um-style',
        plugin_dir_path(__FILE__) . 'includes/plugins/ultimate-member/ultimate-member.css'
    );
        $color = get_option('eri_um_account_menu_bg'); //E.g. #FF0000
        $custom_css = "
                .um-account-side li {
                        background: {$color} !important;
                }";
        wp_add_inline_style( 'custom-um-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );