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