Estou desenvolvendo um web app baseado em React que utiliza Material Components (que por sua vez utiliza Sass) e preciso que a cor da barra do navegador (definida via html meta, conforme mostra o código a seguir) seja obtida a partir do estilo da aplicação (definido no arquivo _vars.scss
como $c-primary-light: #303E2F;
).
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta name="theme-color" content="var($c-primary-light)"/>
</head>
</html>
Definir manualmente a cor no HTML não é uma opção viável, pois a aplicação é do tipo multi tenant, onde cada domínio tem cores diferentes.
Em minhas abordagens (código anterior), tentei obter a cor a partir da variável CSS diretamente no HTML, contudo acredito que isso não é possível.
Quais as possíveis abordagens para solucionar esse problema?
theme-color
de acordo com um estilo selecionado em runtime - e minha preferência é "buscar" essa cor nas variáveis do Sass. Se isso não for possível, gostaria de sugestões para implementar isso usando outros meios.