I am trying to change the named colors in Vuetify so that the visual controls in use around the application inherit the theme centrally and won't require individual color definitions for each component.
The Vuetify theme docs say this about changing theme colors:
This can be easily changed. Simply pass a theme property to the Vue.use function. You can choose to modify all or only some of the theme properties, with the remaining inheriting from the default.
However, I am not seeing this work in practice in standalone/CDN mode with version v1.3.12.
Please note that vue-cli is not used when you load Vue.js from a CDN, and we're very happy working that way as our focus right now is on rapid micro-front-end development.
This codepen shows the code as in the Vuetify docs example, but the colors of the buttons don't change and they remain the default colors. I have even changed the error color to Magenta (#ff00ff
) to make that very apparent when it works:
JavaScript:
Vue.use(Vuetify, {
theme: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#ff00ff'
}
});
new Vue({
el: '#app',
data: () => ({
//
})
});
HTML:
<div id="app">
<v-app>
<v-content>
<v-container grid-list-xl>
<v-btn>Default</v-btn>
<v-btn color='primary'>Primary</v-btn>
<v-btn color='secondary'>Secondary</v-btn>
<v-btn color='accent'>Accent</v-btn>
<v-btn color='error'>Error</v-btn>
</v-container>
</v-content>
</v-app>
</div>
To show that this issue is not limited to CodePen, here is my local project that has a v-navigation-drawer with the error class, and the custom theme color set to Magenta:
v-navigation-drawer.error(app fixed mini-variant='true')
I understand that this type of question has been asked before but this question was using vue-cli and nuxt (i.e. not standalone) and this question was a Vuetify version pre-1.0. What makes this question different is the standalone/CDN aspect.
Vue.use
by default, so you can't override it. In your local project it should work tho. So in codepen you would use something likethis.$vuetify.theme.primary = '#4caf50'
in created hook for example (there are multiple ways probably). Perhaps you can try to reproduce on codesandbox if it's not working (tho there is no starting vuetify template as far as I'm aware).this.$vuetify.theme.error = '#ff00ff';
works in both codepen and locally when added into thecreated
function. Please add this as an Answer and I'll accept it as correct. Thanks again!