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
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 sass file. This will require a Sass loader and a
.scss file entry.
main.sass file will then need to be included in your project.
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 Sass files will be re-generated.
Below is a list of the Material design color palette grouped by primary color
Ready for more? Continue reading with: