Is it possible to have a meta tag for theme-color with content being a CSS variable?

Question

I've got a WordPress child theme that I'd like to adjust the theme-color meta tag for, but I'd like to be able to change it via the GUI in future rather than jumping back into functions.php (and I don't want to use a plugin).

Is there a way to use a CSS variable that lives in an external stylesheet as the color set for the meta tag?

I've tried it but it doesn't seem to be working, even with the stylesheet being linked before the meta line.

Here's the code:

function add_meta_tags() {
// All pages
    // Theme colors
    // Chrome, Firefox OS, and Opera
    echo '<meta name="theme-color" content="var(--wp--preset--color--contrast)">';
    // Chrome, Firefox OS, and Opera - Blogger
    echo '<meta name="theme-color" content="var(--wp--preset--color--contrast)">';
    // Windows Phone
    echo '<meta name="msapplication-navbutton-color" content="var(--wp--preset--color--contrast)">';
    // Windows Phone - Blogger
    echo '<meta name="msapplication-navbutton-color" content="var(--wp--preset--color--contrast)">';
    // iOS Safari
    echo '<meta name="apple-mobile-web-app-capable" content="yes">';
    echo '<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">';
    // iOS Safari - Blogger
    echo '<meta name="apple-mobile-web-app-capable" content="yes">';
    echo '<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">';
}

add_action('wp_head', 'add_meta_tags');