Vuetify how to add custom theme

Question

I used vue cli3 to create my project.

vue create my-project

then I add vuetify to my project.

vue add vuetify

then after I created a custom theme from vuetify theme generator. now I want to add that theme to my project.

In the official documentation of vuetify adding a theme is like this

    Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

But my main.js looks like this

import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

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

In here there is nothing called Vuetify. So how can I add a custom theme in this project setup?

And for picking colors, you can use a color theme builder for Vuetify: lobotuerto.com/vuetify-color-theme-builder Vuetify 2 uses dark and light attributes, so the code you have changes a bit. The link provided generates code for the new Vuetify version. — zenw0lf

ValDaHus ValDaHus · Accepted Answer · 2018-08-07T10:21:23

You are using vue-cli 3 here :) Look at your project, there is a folder called: plugins.

src >> plugins

In this folder you will find vuetify.js, here you can just specify the theme you want to use as the documentation says.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify, {
    theme: {
        primary: "#f44336",
        secondary: "#e57373",
        accent: "#9c27b0",
        error: "#f44336",
        warning: "#ffeb3b",
        info: "#2196f3",
        success: "#4caf50"
      }
})

Vuetify how to add custom theme

1 Answers