How to set a target Theme-color in Runtime from the application styles

Asked

Viewed 153 times

1

I’m developing a React-based web app that uses Material Components (which in turn uses Sass) and requires the color of the browser bar (defined via html meta, as shown in the following code) to be obtained from the application style (defined in the file _vars.scss as $c-primary-light: #303E2F;). 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta name="theme-color" content="var($c-primary-light)"/>
</head>
</html>

Manually setting the color in HTML is not a viable option as the application is of the multi tenant type, where each domain has different colors.

In my approaches (previous code), I tried to get the color from the CSS variable directly in HTML, however I believe that this is not possible.

What are the possible approaches to solving this problem?

html css react sass

  • Dude, I don’t know if your logic is correct... I don’t know about React, but since you want to take a Sass Variable in HTML, play for Sass, compile the CSS and then deliver the rendered page... This is a little confusing to understand... Even is at the head of the page you would have to compile the Sass with the new color and return the CSS before the page finishes the Paint....

  • Basically my problem is to define the theme-color according to a style selected in Runtime - and my preference is to "search" this color in the variables of Sass. If that is not possible, I would like suggestions to implement this using other means.

  • 1

    What I’ve seen most recently is the use of CSS Variables with colors, just for the simple fact that it’s already CSS and doesn’t need to compile, and so override is easier... If you want I can put an answer on the subject, I just don’t know if it will be 100% applicable in your case. Maybe this https://answall.com/questions/298995/o-que-significa-o-specified-no-root-do-css-do-bootstrap/298998#298998 and this can give you a light https://answall.com/questions/330390/existe-alguma-forma-de-usar-um-custom-attributomo-valor-de-uma-property

  • 1

    The links help, yes. I believe that we will need to create a script to solve the value of the CSS variable and then update Theme-color, all via javascript. I still don’t know exactly how to do this. With regard to the answer, I would be happy to mark it as a solution as long as it is the most relevant contribution to solving the problem.

2 answers

1

I’ll give you some tips that might help you with that.

First keep in mind that even within your SASS vc can have Custom Variables from the normal CSS pattern.

For example you can have in your color.scss variables of both types. Then the code below will compile normally!

/* variável SASS padrão */
$color-fff: #fff;

/* variável CSS padrão */
:root {
    --vermelho: #f00;
    --azul: #00f;
}
body {
    background-color: var(--vermelho);
}
p{
    color: $color-fff; 
}

Now you can do the override of --var() quietly straight into HTML, either by including a new style sheet.

<head>
    <link rel="stylesheet" href="color.css">
    <link rel="stylesheet" href="override-da-cor.css">
</head>

Or simply including a tag <style> within the <head> with the override of the variable.

<head>
    <style>
    /* trocando direto no root a referencia para todas as ocorrências */
        :root {
            --azul: #0f0;
        }
        body {
            background-color: var(--azul);
        }
    /* ou trocando apenas no elemento que precisa */
        p {
            --azul: #000;
            color: var(--azul);
        }
    </style>
</head>

1


From the discussion in the comments of the question, and the hugocsl’s response, "I connected the dots" and found a solution to my problem. I describe here what would be a complement to Hugo’s answer, but specific to the situation I described in the question.

After declaring the custom variable (_vars.scss => $c-primary: #303E2F;), include the same in the selector :root of the App:

@import "vars";

:root {
  --meta-theme-color: #{$c-primary};
}

The #{ $variavel } is necessary to solve the value of the variable at that time, as noted on this Github site (in English).

So, in javascript (I used the index.js), create meta tag with color obtained from style:

const themeColor = getComputedStyle(document.querySelector(':root')).getPropertyValue('--meta-theme-color').trim();
const meta = document.createElement('meta');
meta.name = 'theme-color';
meta.content = themeColor;
document.getElementsByTagName('head')[0].appendChild(meta);

Bonus: this article helped me develop the solution and presented a library called Header, that facilitates the dynamic updating of the head.

  • Nice article, cool that solved there

Browser other questions tagged html css react sass

You are not signed in. Login or sign up in order to post.