setting bg-brand with colors.setBrand

Kentskyo

If a custom brand color is defined, say as:

.text-brand {
color: #f1f1ea;
}
.bg-brand {
background: #28213a;
}

then colors.setBrand(“brand”, “#DDD”); sets the text-brand color

but how do you set the brand background programmatically?

this doesn’t work, for example:
colors.setBrand(“bg-brand”, “#000”);

but what does?

Thanks!

s.molinari

setBrand is only for the brand colors. From the docs:

You can dynamically customize the brand colors during run-time: primary, secondary, accent, positive, negative, info, warning.

So, you can only set those 7 colors. setBrand('primary', #3e3e3e) “primary” is one of the 7 brand colors. “brand” isn’t a brand color.

https://quasar.dev/style/color-palette#Dynamic-Change-of-Brand-Colors-(Dynamic-Theme-Colors)

Scott

Kentskyo

I can also set a brand color I custom define, as in the example above. It could have been called anything text-mystuff, bg-mystuff. These colors have both a text- and a bg- color, and setColor only sets the text- color. I was wondering how to set the bg color…

It just seemed odd that only the text-color could be set or is defined

s.molinari

If it is setting your custom made color, it’s a fluke. At least from the docs, I can deduce that. I haven’t even looked at the source code, so just going by what the docs say.

Scott

Kentskyo

Perhaps so. So text colors are first class citizens in a theme, but background colors are left to fend for themselves

s.molinari

The brand colors can be used anywhere. They aren’t just for text color.

Scott

Kentskyo

Yeah, I think what I’m referring to is this:
https://quasar.dev/style/color-palette#Using-as-CSS-Classes

<p class=“text-primary”>…</p>

<p class=“bg-positive”>…</p>

and apparently having the ability to setBrand(“primary”,xxxx) which will change the primary text color
but no equivalent way to setBrand(“positive”, xxxx) to change the background of the positive color

It appears that brand colors carry both, but only one is exposed with setBrand

Kentskyo

or maybe they just carry one color that can be used as a text or background color with a prefix… however, that would make the example in the docs that follows the above pretty confusing:

.text-brand {
color: #a2aa33;
}
.bg-brand {
background: #a2aa33;
}
Now we can use this color for Quasar components:
<q-btn color=“brand” … />

s.molinari

I believe your last post or rather what you are referring to in the docs doesn’t relate to the dynamic changing of brand colors. The “text-brand” and “bg-brand” CSS selectors are just examples of custom CSS you can create yourself. Using “brand” as the name of the customization is probably a poor choice of wording and maybe that is what is confusing you? Think of it more like this.

.text-my-own-text-color {
  color: #a2aa33;
}
.bg-my-own-bg-color {
  background: #a2aa33;
}

If you see it like that, then you’d also understand that setBrand() shouldn’t do anything with or to it.

Scott

s.molinari

Also a disclaimer. I’m going by the docs and my slight knowledge of Quasar and the fact I haven’t messed with this part of Quasar at all. So, I might be wrong. But for sure, if we figure out something is different to my understanding and it’s clear the docs are either wrong or confusing, then we’ll correct it.

Scott

Kentskyo

Thanks Scott… I was assuming some magic was happening with a brand that set a tuple for both background and color… instead it looks like quasar auto generates class definitions for bg-primary and text-primary for background-color: x or color: x and does this for each predefined brand value. And that brand values are basically just css variables with setBrand/getBrand serving as a wrapper around getPropertyValue and setProperty on css variables.

No More Posting New Topics!

setting bg-brand with colors.setBrand