How to modify Vuetify default theme? - vuejs2

Question

In other words, my question is what does <v-toolbar light>'s light actually means?
After I change
Vue.use(Vuetify, {
theme: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
}
})
Nothing happens to <v-toolbar> and I have to apply color attribute to every element, e.g. <v-btn color="primary">primary</v-btn>.
After I specific a color, keyword dark will only affect font color.
e.g. <v-toolbar color="primary" dark> will show primary color and white font.
That is not what I want, how to replace default darkand light with totally custom theme colors. example theme

Answer 1

You can edit the dark and light theme css by going into the vuetify code and editing their style files. They use stylus and any edits should be reflected immediately. To find the style code go to:
yourproject/node_modules/vuetify/src/stylus/settings/_theme.styl
and in there you'll find
$material-light := {
...
}
and
$material-dark := {
...
}
which have the styling for background, fonts, cards, etc.
You should be able to edit it as you see fit.
Otherwise to save editing your node modules folder you can do the following:
create a folder called stylus in your src folder
create a file called main.styl
add this to that file: #import '~vuetify/src/stylus/main'
Then in your main.js add this import './stylus/main.styl
If you then restart your app the styles should now be working from your import.
Edit your src/main.styl file before the import statement and any changes will override the default
eg:
//src/stylus/main.styl
$material-light.background = #36EF45
$body-font-family = 'Raleway'
$alert-font-size = 18px
#import '~vuetify/src/stylus/main'
Anything you don't change will stay with the default.