Colors
Out of the box you get access to all colors in the Material Design specificationthrough sass and javascript. These values can be used within your style sheets, your component files and on actual components via the color prop.
Classes
Each color from the specification gets converted to a background and text variant for styling within your application through a class, e.g. <div class="bg-red">
or <span class="text-red">
. These class colors are defined here.
Text colors also support darken and lighten variants using text-{color}-{lighten|darken}-{n}
Javascript color pack
Vuetify has an optional javascript color pack that you can import and use within your application. This can also be used to help define your application’s theme.
import { createVuetify } from 'vuetify'
import colors from 'vuetify/lib/util/colors'
export default createVuetify({
theme: {
themes: {
light: {
dark: false,
colors: {
primary: colors.red.darken1, // #E53935
secondary: colors.red.lighten4, // #FFCDD2
...
}
},
},
},
})
Sass color pack
While convenient, the color pack increases the CSS export size by ~30kb. Some projects may only require the classes that are created at runtime from the Vuetify theme system. To disable the color pack feature, follow sass variablesand set $color-pack: false
.
@use 'vuetify' with (
$color-pack: false,
);
Material colors
Below is a list of the Material design color palette grouped by primary color