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

Light and Dark

You can set your application's default theme by setting the dark or light prop on surrounding v-app component.
This will assign default colors to all components based upon your choice. This can be confusing sometimes, for example:
<v-icon light>list</v-icon>
content_copy
You may expect the icon to be tinted towards white, but this is the exact opposite, as some components have a dark tint on a light theme, such as v-divider.

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-loader', 'css-loader', 'stylus-loader']
}
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
@require '../../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">
  @require './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.
@require '../../node_modules/vuetify/src/stylus/settings/_colors'
 
@import '../../node_modules/vuetify/src/stylus/main'
content_copy
After you have decided on your color palette, simply create a new hash:
@require '../../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
}
 
@require '../../node_modules/vuetify/src/stylus/main'
content_copy