I'm using vuetify (2.5.8) with our own custom theme colors. We've defined our own color names via String, or Object if we need more control over which variations are generated and to have fewer css variables. However, I haven't been able to get these variations to work with the color prop of vuetify elements, specifically v-expansion-panel-header.

In the docs I saw example use of color=”purple darken-2" and color="success darken-2", separating the theme color and its variation by a space. This works, when a color in my theme is defined as a string and its variations are generated by vuetify as (darken|lighten)-{n}.

But when I define my own variations, this doesn't work anymore. For example: if I define the color success: { base: '#1CC234', muted: '#2AAC9B', }' in my theme, I can't use color="success muted", it will always display the base color. This is also true when I try to name my variations the way vuetify describes them, for example success: { base: '#1CC234', 'darken-2': '#2AAC9B', }'. In this case, color="success darken-2" no longer works.

I've tried working around it by naming my variations 'darken-2' and the like, as well as nested syntax (success.muted) as the name of the generated color variable (success-muted), but to no avail. Does anyone have a way to pass these variations via the color prop, without having to use a v-deep selector and restyling the entire component everywhere I use it? Or should I use a computed to reach into this.$vuetify.theme and see if I can get the hexcode that way?

Thanks in advance.

CodePudding user response：

color="success muted"

Only base and lighten/darken variations are used.
You can work around this by defining it as { success: '#1CC234', 'success-muted': '#2AAC9B' }

In this case, color="success darken-2" no longer works.

The keys in the theme configuration should be in camelCase: darken2