Quasar: [Request] Set other dynamic color variables

[rossity]

My application has more colors than the standard set given by default by Quasar:
primary, secondary, tertiary,positive, negative, info, warning, white, light, dark, faded
For instance, my toolbars have a border color that bases itself off the primary color of the app:

Users can set a new theme in my app, which changes the primary and secondary colors at runtime. However, the border color mentioned earlier cannot be updated at runtime

There's lots of options according to Material Design, the default of which includes the ability to have two variants to your primary color and one variant to your secondary color.

I'd like to be able to set these variables in common.variables.styl and change them in runtime via setBrand for example:

//common.variables.style
$primary-variant-one = #d32f2f

colors.setBrand('primary-variant-one', #d32f2f)

And alternative, or addition, to this idea could be what Vuetify does with their themes, where they define the colors and darken/lighten classes are automatically created for them, though this seems overly difficult and less customizabl.

[nothingismagick]

First of all, this behaviour is spec. Here you can see the colors defined by material design:
https://material.io/design/color/#color-usage-palettes

This gist by @GastroGeek may help you though:
https://gist.github.com/GastroGeek/b7ca27802405f636de16ba444082a8f1

If you need nevertheless need to make modifications to existing components for your own personal reasons, I recommend following the procedure here: http://quasar-framework.org/components/building-reusable-components.html

[pdanpdan]

That enumeration of colorNames is for the internally used ones. You can use other names without a problem as long as you define them correctly in your CSS.

[rossity]

@nothingismagick I may not have explained the request correctly and updated the post using the first link you provided.

@pdanpdan I'll try that out thank you

[pdanpdan]

The color created is --q-color-, so use this in CSS. If your color is derived from primary then set both when user changes primary. You have a lighten utility function in colors.

[nothingismagick]

@pdanpdan - do you think that this information would be good in the docs? It seems that a lot of people (myself included) would like to know more than what we currently have there.

[pdanpdan]

I'll try to enhance the docs for this.

[rstoenescu]

Updated docs, will be visible along the next Quasar version.