Input's error-message's color

[codethirsty]

How can i change the :error-message’s color?. I am working over a grey-8 background and that default color kills the constrast.

[codethirsty]

@codethirsty said in Input's error-message's color:

How can i change the :error-message’s color?. I am working over a grey-8 background and that default color kills the constrast.

Well i had some advances using

     div .q-field__messages {
        color: tomato !important
}

But the outlined input’s color, counter and error icons remains the same.

[dobbel]

@codethirsty

Here’s the colors , the icons are a bit more difficult…
https://codepen.io/ontwikkelfabriek/pen/GRjpQxv

[beets]

If you want to change the negative color globally, you can also just set the default negative color with sass. I do the same with a dark theme as the default red is pretty bad contrast wise:

In quasar.variables.sass

$negative: tomato

Full list here: https://quasar.dev/style/sass-scss-variables#Variables-list

[codethirsty]

@dobbel said in Input's error-message's color:

@codethirsty

Here’s the colors , the icons are a bit more difficult…
https://codepen.io/ontwikkelfabriek/pen/GRjpQxv

@dobbel @beets Thanks you all, I found a way i wanted to share with you yesterday, but I only have internet at work. My input also had a counter.

<style lang="sass">
 .q-input .text-negative
        color: tomato !important
 .q-field--error .q-field__bottom
        color: tomato  !important
        color: tomato !important
</style>

In order to modify the input’s counter color is require to modify the color property of .q-field___bottom