[Feature Request] recommended text-color css helper

[kpilard]

Can you add a way to automatically set the text color of fields. It can be pretty annoying to create a colored component and look for the recommended text-color.
If you render a dynamic colored component you always need some logic to add the correct text-color.

I could add the feature if it is needed.

Here is in exmple of the problem and a way to implement is just with css.
https://codepen.io/anon/pen/MBPLKE

[KaelWD]

https://github.com/vuetifyjs/vuetify/pull/2872/commits/414cfe1d52f9cb8d45009cbc844efb71e72a299b

[kpilard]

@KaelWD Okay in this case the colors were calculated with some sort of algorithm, right?
I would just add a mapping of colors to recommended text-colors.
Of course it could be that it is too much css is for too little functionality.

Example of light blue

default should be white
lighten-5 to lighten-1 should be black
darken-1 to darken-4 should be white
accent should be black

[KaelWD]

Yes, that was originally just for theme colours (primary etc). This is something I want to revisit at some point though.

[erichorne]

For custom colors there is a similar situation. There are times when the light/dark versions of custom colors come too close to the text-color associated with the light/dark theme. Imagine a dark color of white and a light color of black. In this case, when the light theme is used, the text color will not be visible. Same if the dark theme is used.

Adding the ability to associate a text color to the custom color (or, more generally, associate a css class) would provide developers access to more appropriately set the text color to match the background. Alternatively, determining the text-color based on the light-ness or dark-ness of the background color would also work.

What started me on this was trying to get a custom color to work like the built-in color 'primary' for v-btn -- in a light theme with default theme, the text color is white--text, not black--text.

Without this feature, it is possible for theme colors to unintentionally make text difficult to read.

See https://codepen.io/erichorne/pen/MWgyYge for an example.

[johnleider]

This is happening in version 3 with the updated theme system and automatic contrast detection. Follow for future updates #12688.

If you have any additional questions, please reach out to us in our Discord community.