Vuetify how to add a custom color theme after create the project

I used vue cli to add vuetify to my project.
vue add vuetify

It asked me whether or not use the custom theme? I said no in that point.

But now I want to change my color theme?

How to I achieve this?

This is my main.js file.

It just calls vuetify as a plugin not as a const.

You can do something like

Vue.use(Vuetify, {
  theme: {
    primary: '#4285F4',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#ff4444',
    info: '#33b5e5',
    success: '#00C851',
    warning: '#ffbb33'
  }
});

I couldn’t do this becasue vuetify is not defined in my main.js

I have the following, but that was with a basic vuetify install before vue add vuetify.

import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.config.productionTip = false;
Vue.use(Vuetify, {
  theme: {
    primary: '#4285F4',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#ff4444',
    info: '#33b5e5',
    success: '#00C851',
    warning: '#ffbb33'
  }
});

new Vue({ router, render: (h: any) => h(App) }).$mount('#app');

I have found the solution. It was dead simple. There was a folder called pluggings in my project and inside that there was file called vuetify.js there I added custom theme. :blush::blush:

3 Likes

Great :smiley:

Does this code still work? I seem to be unable to specify

{
    theme: {
        primary: '#4db6ac',
        secondary: '#b64d57'
      }
}

It only seems to take affect when I pass in themes with light/dark:

{
    theme: {
        themes: {
            light: {
                primary: '#4db6ac'
            }
        }
      }
}
1 Like

Thank you man. Its work!