How to Use Color in Vuetify

Style components with colors from the Material Design palette with Vuetify.

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 setting the color of Vuetify components. To demonstrate them, let’s create a card component:

<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 Color 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>

Beautify with Vuetify

The complete guide to creating elegant web apps with the Vuetify Material Design framework.

Download a free copy here!

Setting Color 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.

Sign up for our weekly newsletter to stay updated with the latest tips on Vuetify and Vue.

Get the updated article at https://codingbeautydev.com