Vuetify dark theme customizing does not work - vue.js

Question

I'm using Vue with Vuetify 1.5.14 and I'm trying to customize my theme. I just follow the docs to do this. When I apply color="primary" to my v-card component, it correctly uses the custom primary base color. However when I apply the dark property to it, it still show the base color instead of the darken1 color. This is my vuetify.js file:
Vue.use(Vuetify, {
iconfont: 'md',
theme: {
primary: {
base: '#673ab7',
darken1: '#320b86',
lighten1: '#9a67ea'
},
secondary: {
base: '#00bcd4',
darken1: '#008ba3',
lighten1: '#62efff'
},
accent: '#ffeb3b',
error: '#f44336',
warning: '#ffc107',
info: '#009688',
success: '#8bc34a'
}
});
Anyone has an idea how to properly customize the light theme colors?

Answer 1

From v1.5.14 docs:
Custom theme variants
While Vuetify automatically generates lighten and darken variants for theme colors, you may want to control this yourself. Simply pass a theme object that contains the variants that you wish to modify. Anything not provided will still be generated for you.
// src/theme.js
import colors from 'vuetify/es5/util/colors'
export default {
primary: {
base: colors.purple.base, // modifies `primary`
darken1: colors.purple.darken2 // modifies `primary darken-1`
},
When you set colors predefined by vuetify then light and dark variants are automatically set for you.
Modifying these options in vuetify v1 just change your custom lightening or darkening of your color i.e. primary lighten-1.
So in dark theme (i.e. <v-app dark) you would use them like so:
:color="$vuetify.dark ? 'primary darken-1' : 'primary'"
$vuetify.dark is a property which determines if you are using dark theme.
If you need this per component (i.e. you want to pass dark property to a component), then you need to manually extend a component to support that feature.
Automatic toggle between custom dark and light theme colors will be supported in v2. (already works in beta)