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?

    Cheers,
    m.



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



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

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



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



  • @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:

    fbc21beb-2e1e-4cbf-bbff-c5177077e752-image.png

    d71c35bc-3459-4f20-ab27-db9f1336322b-image.png



  • 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
    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>
    
    


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


Log in to reply