Theme
Vuetify offers the ability to easily change the colors of your application.

Light and Dark

The default configuration is set to a light theme, but you're free to swap to a darker one by doing the following.
After setting your app theme with <v-app dark></v-app> theme, reset the material theme stylus variable:
$material-theme := $material-dark
content_copy

Customizing

The default theme hash looks like the example below:
$theme := {
  primary: $blue.darken-2
  accent: $blue.accent-2
  secondary: $grey.darken-3
  info: $blue.base
  warning: $amber.base
  error: $red.base
  success: $green.base
}
content_copy
In order to change these variables, we have to create our array before the import of the Vuetify styles. You will need to setup your build process to accommodate a stylus file. If you are using one of the pre-made templates available on the Quick Start guide, you can skip this next section.
Setup stylus-loader with Webpack
In the command line, run:
npm i stylus stylus-loader style-loader css-loader --save-dev
content_copy
This will install the dependecies needed to import stylus files. Once installed, open your webpack config and add an additional rule:
{
  test: /\.styl$/,
  loader: ['style', 'css', 'stylus']
}
content_copy
This will tell webpack how to handle a .styl file when imported. Next, we need to create the main entry point. Create a folder called stylus in your src directory with a file named main.styl. Once done, open the .styl file and add this entry.
// main.styl
@import '../../node_modules/vuetify/src/stylus/main'
content_copy
Keep in mind that the relative location of node_modules may differ in your project so adjust accordingly. You have 2 options for import location, either your main App.vue or app.js.
// app.js
require('./stylus/main.styl')
content_copy
// App.vue
<style lang="stylus">
  @import './stylus/main'
</style>
content_copy
After you have decided on your import location, if you are requiring the Vuetify stylesheet by a <link> tag in your index file, remove it. Restart your build processes and re-open your project. You should see all of the styles working correctly.
Modify your theme
Now that stylus is configured, we can create a custom $theme hash containing the application specific styles. Keep in mind, if you want to use the built in color pack variables, i.e. $grey.lighten-3 you will need to import the color file at the top of your main.styl file. For a list of colors available, navigate to the Colors section of the documentation.
@import '../../node_modules/vuetify/src/stylus/settings/_colors'
 
@import '../../node_modules/vuetify/src/stylus/main'
content_copy
After you have decided on your color pallete, simply create a new hash:
@import '../../node_modules/vuetify/src/stylus/settings/_colors'
 
$theme := {
  primary: $red.darken-2
  accent: $red.accent-2
  secondary: $grey.lighten-1
  info: $blue.lighten-1
  warning: $amber.darken-2
  error: $red.accent-4
  success: $green.lighten-2
}
 
@import '../../node_modules/vuetify/src/stylus/main'
content_copy