Can I register my own color?

[wsw70]

I would like to color tags with random colors. To this, I have a this.tagsColor property, an object that will hold pairs such as aaa: tagColoraaa, where aaa is the name of the tag, and tagColoraaa is the name of the color I am registering.

To do this, I have a function called when a new tag is used:

 generateColor(tag) {
    if (!(tag in this.tagsColors)) {
      const colorName = `tagColor${tag}`  // create a color name
      const colorCode = Math.floor(Math.random() * 16777215).toString(16)  // get a random color
      colors.setBrand(colorName, `#${colorCode}`)  // register the new color name
      Vue.set(this.tagsColors, tag, colorName)  // update the property holding all colors (later used to assign a color to a tag)
      console.log(`tag ${tag} has color ${this.tagsColors[tag]} = ${getPaletteColor(this.tagsColors[tag])}, colorCode: ${colorCode}`)
    }
  },

The comments show the progression (generate the color name, generate a random color, assign the color to the code, update the map this.tagsColor) but the console output is:

tag eee has color tagColoreee = #000000, colorCode: f5ec31
tag aaaa has color tagColoraaaa = #000000, colorCode: 9483ff
tag security has color tagColorsecurity = #000000, colorCode: c2eab2

So it looks like my mapping (colors.setBrand()) does not work correctly. Why?

[hawkeye64]

You can only set the brand colors which are associated with css vars. These are the ones and must be used as first parameter to setBrand function: One of primary, secondary, accent, dark, positive, negative, info, and warning
https://quasar.dev/style/color-palette#helper-setbrand

[wsw70]

Thank you. Does this mean that I can only use one of these brand colors with the color property of, say; q-chip? Specifically, is there a way to use a HEX color there?

[hawkeye64]

Because they are represented by CSS vars, you can only use valid CSS color expressions, not classes (ie: red-8)
If you use setBrand('primary', '#0010FF') and your QChip is using bg-primary (as a class), then it will change color to your changed brand.