CODEWITHSUNDEEP
vuetify.js
Graham
Graham

Reputation: 7802

How to change the theme colors in Vuetify in standalone/CDN mode?

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:

enter image description here

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.

Upvotes: 2

Views: 16836

Answers (2)

msayubi76
msayubi76

Reputation: 1658

Customize your main.js or app.js file by following way

const app = new Vue({
el: '#app',
vuetify : new Vuetify(
    {
        theme: {
            themes: {
              light: {
                primary: '#1cc3b5',
                secondary: '#b0bec5',
                accent: '#8c9eff',
                error: '#b71c1c',
              },
            },
          },
    }
), 
components:{
    ...
}});

Upvotes: 1

Traxo
Traxo

Reputation: 19002

Apparently publisher calls Vue.use(Vuetify) already. So you need to override variables before initializing Vue:

Vue.prototype.$vuetify.theme = {
  primary: '#3f51b5',
  secondary: '#b0bec5',
  accent: '#8c9eff',
  error: '#ff00ff'
};


new Vue({ ...

Or override them in created hook:

new Vue({
  el: '#app',
  data: () => ({
    //
  }),
  created() {
    this.$vuetify.theme.primary = '#3f51b5',
  }
});

Upvotes: 6

Related Questions