SCSS brand colors not reactive

  • Hi there

    I am altering the built-in brand colors to offer a dark and light themed UI.

    When I change, for example, the ‘primary’ brand color, it is updated everywhere, except here:

    .tileBGColor {
       background:rgba($color: $primary, $alpha: 0.8)

    How do I make sure that changed brand colors get updated when used in customscss definitions?


  • Dark Mode is now built in. Have you seen it ?

  • @turigeza Yep, I’ve given it a spin. That’s not what I want, though…I want a bit more control over the theming.

  • @mboeni ok … just checking.

    The CSS you have posted doesn’t look right. Not even for a stylus function. The rgba function should look like this:

    rgba($green-7, $alpha);
    rgba($green-7, 0.8);
    But not like
    rgba($green-7, $alpha: 0.8);

  • @turigeza Hmm, strange…the above function actually works (at least I get the correct visual results). I do admit, though, that the syntax looks wrong…

    It’s just that if I change the color value for $primary, it’s not updated.

    Using rgba($primary, 0.8) does the same as the function I have posted above but the color is still not updated on the page if $primary is changed.

  • @mboeni
    I suspect maybe some other style must be applied to the element in that case.
    Have a look in chrome inspector if the colour does indeed come from .tileBGColor class or from somewhere else.

  • @turigeza Yes it does:

    Anmerkung 2019-12-08 175301.png

      .tileBGColor {
        background:rgba($primary, 0.8)

    The correct color should be the one seen in the toolbar + 20% transparency.

  • That’s really strange:

    <div class="col q-ma-sm tileBGColor" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
    NEWS 1
    <div class="col q-ma-sm bg-primary" style="border-radius: 7px; height: 300px; width: 300px; min-width: 300px; max-width: 400px">
    NEWS 2

    Assigning primary as bg-primary works, applying it via the css does not…

  • @mboeni
    I meant like this. The screenshot only shows that tileBgColor class applied.
    I meant look at the cascade (Computed tab) where the wrong colour comes from. See screenshot:

    Screen Shot 2019-12-08 at 17.07.53.png

  • @turigeza here you go:



  • This post is deleted!

  • @mboeni I have no idea in that case sorry …
    If that is not the number you expect to see the variable $primary may contain the wrong value.

    I would also try and set the background-color instead of background but it looks like it is not the case in your situation.

  • @turigeza thats the strange thing…using bg-primaryworks, the css version (using $primary) does not…

    I’ll try setting the ‘background color’ as you mentioned…

  • Multiple declaration of the same variable as a last thought. Do a global search for $primary in your project.
    It should only be declared once.
    In my case src/css/quasar.variables.styl

  • @turigeza $primary is actually a ‘brand’ color offered by quasar - i just change the value of it. I’ll do an investigation though…you never know…

  • @turigeza Nope, it’s not a redefinition… -.- just checked…

  • @turigeza I might have a lead here…shouldn’t this be working:

        console.log('Changed Primary color:' + getComputedStyle(document.documentElement).getPropertyValue('--q-color-primary'))
        colors.setBrand('primary', '#e6edf2')
        console.log('Changed Primary color:' + getComputedStyle(document.documentElement).getPropertyValue('--q-color-primary'))

    Fact is, the color is NOT changed as expected, output is #364552 in both cases…

  • @mboeni I get the same issue.
    I would do a pen on the subject if I knew how to include the quasar colour utility
    on a pen.

    But I don’t. : )

    colors.setBrand('primary', '#eee'); does not update the variables inside your classes.

    Example code does not work because custom-background will never change colour but remains the original $primary colour.

    <div id="colours" class="bg-white q-ma-lg q-pa-lg">
        <q-color v-model="hex" no-header class="my-picker" ></q-color>
        <div class="q-pa-xl bg-primary">1</div>
        <div class="q-pa-xl custom-background">2</div>
        <h3 class="caption">Main Colors</h3>
        <div class="main-color row inline flex-center text-white q-pa-lg q-mb-lg" v-for="color in mainColors" :key="color" :class="`bg-${color}`">
            {{ color }}
    import { colors } from 'quasar';
    export default {
        name: 'Colours',
        data: () => {
            return {
                mainColors: ['primary', 'secondary', 'accent', 'positive', 'negative', 'info', 'warning', 'black'],
                hex: ''
        watch: {
            hex: function (n, o) {
                colors.setBrand('primary', n);
    <style lang="stylus">
            background-color: $primary;

  • @turigeza Very stange…Perhaps one of the devs can shed some light on this…?

  • @mboeni
    I got it …

    So you should be using css variable in your case like

    background-color: var(--q-color-primary);

    and not like

    background-color: $primary;

    Because the latter will be replaced by actual colour values.

    Docs related to this is here:

    Actually they do it like

    background-color: $primary;
    background-color: var(--q-color-primary);

    for fallback for older browsers.

Log in to reply