SCSS brand colors not reactive

mboeni

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?

Cheers,
m.

turigeza

Dark Mode is now built in. Have you seen it ?
https://quasar.dev/style/dark-mode#What-it-does

mboeni

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

turigeza

@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);
or
rgba($green-7, 0.8);
But not like
rgba($green-7, $alpha: 0.8);

http://stylus-lang.com/docs/bifs.html#rgbacolor--rgba

mboeni

@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.

turigeza

@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.

mboeni

@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.

mboeni

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

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

turigeza

@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

mboeni

@turigeza here you go:

turigeza

This post is deleted!

turigeza

@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.

mboeni

@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…

turigeza

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

mboeni

@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…

mboeni

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

mboeni

@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…

turigeza

@mboeni I get the same issue.
I would do a pen on the subject if I knew how to include the quasar colour utility
https://quasar.dev/quasar-utils/color-utils
on a pen.

But I don’t. : )

Basically
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.


<template>
<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 }}
    </div>
</div>
</template>

<script>
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);
        }
    }
};

</script>

<style lang="stylus">
    .custom-background{
        background-color: $primary;
    }
</style>

mboeni

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

turigeza

@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:
https://quasar.dev/quasar-utils/color-utils#Create-Dynamic-Custom-Colors

Actually they do it like

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

for fallback for older browsers.