Search code examples
vuetify.jsvuetifyjs3

Vuetify3 primary color variations as css vars


in Vuetify 2 it Vuetify exposes light and dark variations of the primary and other colors as css vars e.g. --v-primary-lighten2; etc. After upgrading to veutify3 i found those are not exposed anymore in that way. I only find

--v-theme-primary and 

--v-theme-primary-darken-1

but no darken-2 or lighten-1/2. Is there a good way to get them? e.g. also a js function to calculate them or js constant that has the value would be good. Alternatively the options I seem to have seem to be to use css brightness (not sure how that affects eg. text if I only want to change the background to make it lighter) or use a npmjs js dependency to do the color magic.

Any ideas for a vuetify way?

Cheers Tom


Solution

  • Only darken-1 is set for primary/secondary by default. Additional variations can be generated by adding the colors you want variations for to theme.variations.colors and setting theme.variations.lighten and theme.variations.darken to the number of levels you want.

    https://vuetifyjs.com/en/features/theme/#color-variations