Quasar: Access color palette in JavaScript context

[niklas-e]

Is your feature request related to a problem? Please describe.
Would be neat and useful to have color palette in JS context too. For example when using chart.js the chart colors are defined in JS.

Describe the solution you'd like
To have something like this:

import { colors } from 'quasar'

const myRandomThing = {
  backgroundColor: colors.palette.deepPurple8
}

I was thinking it could maybe be done by defining color palette in JSON file and then importing it to style variables (sass/stylus) definitions. This would also centralize the color definitions. Now they are separately defined in sass and stylus.

Describe alternatives you've considered

There's no other way than copy-paste colors and hope they do not change often :smile:

Additional context
Here's a fiddle for chart.js example. As you can see the colors are defined in the JS context.
https://jsfiddle.net/xjeyabo1/

[rstoenescu]

Would a method getQuasarColor(name: String) be good enough?

[niklas-e]

Yeah, I think that would be good enough. Though should it be colors.getColor(name: String)?

[niklas-e]

...or maybe colos.getByName(name: String) :slightly_smiling_face:

[smolinari]

Or,

colors.paletteToHex(name: String)
colors.paletteToRgb(name: String)
colors.paletteToHsv(name: String)

:grin:

Scott

[rstoenescu]

Extract from v1.10.0 (to be released) docs:

You can query any brand color, palette color or custom color in JS context to get its hex string value. Note that the method below is not cheap to run, so use it with care:

import { colors } from 'quasar'

const { getPaletteColor } = colors

console.log(getPaletteColor('primary')) // '#1976d2'
console.log(getPaletteColor('red-2')) // '#ffcdd2'

Assuming you've created a custom color and named it "my-color", then you can extract its value in JS:

console.log(getPaletteColor('my-color')) // '#...'