Vuetify comes fully loaded with lots of color options for our use. All the colors from the Material Design spec are available. There are different ways of using Vuetify colors to style components. To demonstrate them, let’s create a card:
<template>
<v-app>
<v-card class="pa-4 ma-4">The quick brown fox jumped over the lazy dogs</v-card>
</v-app>
</template>
<script>
export default {
name: 'App',
};
</script>Here’s what it looks like for now:
Setting Vuetify Colors with the color Prop
Most Vuetify components come with a color prop for customizing the look of the component. Let’s change the card color to see how it works:
<template>
<v-app>
<v-card class="pa-4 ma-4" color="yellow"
>The quick brown fox jumped over the lazy dogs</v-card
>
</v-app>
</template>
...
We can make the color lighter or darker by using appending lighten-{n} or darker-{n} where n stands for how much lighter or darker you want the card to become. We can make it just a little darker:
<template>
<v-app>
<v-card class="pa-4 ma-4" color="yellow darken-1"
>The quick brown fox jumped over the lazy dogs</v-card
>
</v-app>
</template>
...
Or very dark:
<template>
<v-app>
<v-card class="pa-4 ma-4" color="yellow darken-4"
>The quick brown fox jumped over the lazy dogs</v-card
>
</v-app>
</template>
...
With the color prop we can also set the card to a more general color set from the Vuetify theme, such as primary. Here, the primary theme color is blue:
<template>
<v-app>
<v-card class="pa-4 ma-4" color="primary"
>The quick brown fox jumped over the lazy dogs</v-card
>
</v-app>
</template>
Setting Colors with Vuetify Color Classes
An alternative way of setting a component color is by using one of the many classes in Vuetify for adding color to a component. So for the example where we made the card yellow, instead of doing that with the color prop, we could have done it by adding the yellow class to the card:
<template>
<v-app>
<v-card class="pa-4 ma-4 yellow"
>The quick brown fox jumped over the lazy dogs</v-card
>
</v-app>
</template>Of course, we can also use one of the lighten-{n} or darken-{n} classes. Let’s lighten things up:
<template>
<v-app>
<v-card class="pa-4 ma-4" color="yellow lighten-2"
>The quick brown fox jumped over the lazy dogs</v-card
>
</v-app>
</template>
Apart from these modifying classes, there is also the accent-{n} class for specifying up to 4 different accents for one color group, which can be used as follows:
<template>
<v-app>
<v-card class="pa-4 ma-4" color="yellow accent-4"
>The quick brown fox jumped over the lazy dogs</v-card
>
</v-app>
</template>
Summary
We are definitely not limited to just yellow. By picking a color group (yellow, red, blue, and so on) and combining it with one of the modifying classes (lighten-{n}, darken-{n}, accent-{n}) you can get hundreds of colors to add to your Vue app and reflect your brand or style.
11 Amazing New JavaScript Features in ES13
This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.
