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.
Text colors also support darken and lighten variants using
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.
main.styl file will then need to be included in your project.
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.
Below is a list of the Material design color palette grouped by primary color