[Vuejs]-Vuetify 3 using custom theme colors in vue component

by

0👍

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

0👍

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))

Leave a comment