Vuetify 3 using custom theme colors in vue component

Question

So im migrating from Vue2/vuetify2 to vue3/vuetify3 and i use to be able to style my v-card-title like so: v-card-title class="text-h6 primary lighten-1". But since moving over to vuetify3 so far i cant figure out how to do this anymore. Putting the color style in the class no longer works and so far creating a scoped class and tying to var(--v-primary-base) or any other combination of the color variable has not worked.

How are people doing this in the new Vuetify version?

Answer 1

This is listed in the upgrade guide

• Color classes have been renamed:
  • Backgrounds have a bg- prefix, for example .primary is now .bg-primary.
  • Text colors have a text- prefix, for example .primary--text is now .text-primary.
  • Variants are no longer a separate class, for example .primary--text.text--darken-1 is now .text-primary-darken-1.

Which means that your class="primary lighten-1" is now class="bg-primary-lighten-1"

tying to var(--v-primary-base) or any other combination of the color variable has not worked

This is also in the upgrade guide, the v3 equivalent is rgb(var(--v-theme-primary))

Answer 2

I found out how to do it. Use: class="bg-my-custom-color"