How to use colors in vuetify

Question

I know I can import colors so I can use deep-purple lighten-4 in JS, how would I actually do that in the Vuetify theme section below? Do I need to add a Vue.use(colors) ?

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
import colors from 'vuetify/es5/util/colors'

import App from './App'
import router from './router'

Vue.use(Vuetify, { theme: {
  primary: '#ee44aa',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107'
}})

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

Answer 1

From the docs:

import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
  theme: {
    primary: colors.blue.darken4,
    secondary: colors.amber.lighten2
  }
})

Any theme color you don't specify inside the theme object is just given its default value by Vue.

Answer 2

just use the color="" <- then your desired color ex.

<v-btn color="success">Success</v-btn>

here is my sample pen for further more example

https://codepen.io/pen/?editors=1010