Update theme-color meta without page refresh

Question

I am unsure whether this is possible; we have various theme colors (colours...) and they change with each page. We are also utilising a lot of content loading without page refreshes.

I want to use the theme-color meta tag that is available in in chrome mobile browsers to set the tab colour.

As our pages do not refresh, i would like this color to reflect the new page background colour. I can remove the original meta and add a new with the following;

function updateMetaThemeColor(theme) {
    var themeColor;
    if(theme == 'theme-1') {
        themeColor = '#f4dcdc'
    } else if(theme == 'theme-2') {
        themeColor = '#f0e8dd';
    } else if(theme == 'theme-3') {
        themeColor = '#d5e7f0';
    } else if(theme == 'theme-4') {
        themeColor = '#f6efb9';
    } else if(theme == 'theme-5') {
        themeColor = '#eaeae8';
    } else if(theme == 'theme-6') {
        themeColor = '#f8e3c7';
    } else if(theme == 'theme-7') {
        themeColor = '#cde8e8';
    }

    //remove the current meta
    $('meta[name=theme-color]').remove();
    //add the new one
    $('head').append('<meta name="theme-color" content="'+themeColor+'">');
}

This does work, in that it removes and reconstructs the meta tag, but as i feared, this change is not reflected in the page itself on Chrome mobile browser.

Is there a way to force the mobile browser to have another look for the meta tag and change when necessary?

Thanks

Answer 1

You can do it like this

document.querySelector("meta[name='theme-color']").setAttribute("content", "<your-color>");

or

document.querySelector("meta[name='theme-color']").content = "<your-color>";

Answer 2

It actually looks like the approach above does work exactly as it should. Guess i should test better, huh.