setting bg-brand with colors.setBrand



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



  • 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



  • 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



  • 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



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



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

    Scott



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

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

    <!-- changing background color -->
    <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



  • 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” … />



  • 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



  • 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



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


Log in to reply