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 custom
scss
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);
-
@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:
.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: -
-
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-primary
works, 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-ColorsActually they do it like
background-color: $primary; background-color: var(--q-color-primary);
for fallback for older browsers.