Use hex value to set Toggle color?

[argonaut76]

Is it possible to use a hex value to set the color of a Toggle? For example:

<q-toggle
   color="#575757"
   keep-color
   ...
>

The docs suggest you can only use names from the Quasar color palette, but this seems like it should be possible. Thanks for any and all help!

[s.molinari]

Yes, you can, if you define the color in the CSS: https://codepen.io/smolinari/pen/abOObbq

Scott

[argonaut76]

Oh, that’s awesome and super simple. Thanks Scott!

[s.molinari]

Don’t forget, if you are going to use the color across your app, you can also define it in your global custom css (i.e. in the app.sass, app.scss or app.styl files in the /css folder). And, you can define your own Q css variables in the quasar.variables.sass, quasar.variables.scss or quasar.variables.style file too.

Scott

[Dapeng]

In my case, the colors (hex value) are calculated so it is difficult to use the method recommended by @s-molinari. Is there any way to set the color that is hex value calculated? It would be good to have property color recognize hex value directly or have new property for hex color.

[metalsadman]

@Dapeng try to look into color utils https://quasar.dev/quasar-utils/color-utils