Colors

Out of the box you get access to all colors in the Material Design spec through stylus and javascript. These values can be used within your style sheets, your component files and on actual components via the color class system.

Classes

Each color from the spec gets converted to a background and text variant for styling within your application through a class, e.g. <div class="red"> or <span class="red--text">. These class colors are defined here.

Stylus color pack

While convenient, the color pack increases the css export size by ~30kb. Some projects may only require the default provided classes that are created at run-time from the Vuetify bootstrap. To disable this feature, you will have to manually import and build the main stylus file. This will require a stylus loader and a .styl file entry.

You must configure your webpack setup to use stylus. If you are using a pre-made template this will already be done for you.

This can also be done within your main App.vue file. Keep in mind, depending on your project setup, this will increase build times as every time your entry file is updated, the stylus files will be re-generated.