How to Use Colors in Vuetify
![How to Use Colors in Vuetify](/_next/image?url=https%3A%2F%2Fwp.codingbeautydev.com%2Fwp-content%2Fuploads%2F2022%2F03%2Fvuetify-colors-2.png&w=3840&q=75)
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:
![](/_next/image?url=https%3A%2F%2Fcoding-beauty.000webhostapp.com%2Fwp-content%2Fuploads%2F2022%2F01%2Fimage.png&w=3840&q=75)
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>
...
![Setting Vuetify colors with the color prop.](/_next/image?url=https%3A%2F%2Fcoding-beauty.000webhostapp.com%2Fwp-content%2Fuploads%2F2022%2F01%2Fimage-1.png&w=3840&q=75)
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>
...
![Making Vuetify colors darker.](/_next/image?url=https%3A%2F%2Fcoding-beauty.000webhostapp.com%2Fwp-content%2Fuploads%2F2022%2F01%2Fimage-3.png&w=3840&q=75)
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>
...
![Making Vuetify colors much darker.](/_next/image?url=https%3A%2F%2Fcoding-beauty.000webhostapp.com%2Fwp-content%2Fuploads%2F2022%2F01%2Fimage-4.png&w=3840&q=75)
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>
![Using Vuetify theme colors.](/_next/image?url=https%3A%2F%2Fcoding-beauty.000webhostapp.com%2Fwp-content%2Fuploads%2F2022%2F01%2Fimage-2.png&w=3840&q=75)
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>
![Making Vuetify colors lighter.](/_next/image?url=https%3A%2F%2Fcoding-beauty.000webhostapp.com%2Fwp-content%2Fuploads%2F2022%2F01%2Fimage-5.png&w=3840&q=75)
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>
![Use a Vuetify color accent class.](/_next/image?url=https%3A%2F%2Fcoding-beauty.000webhostapp.com%2Fwp-content%2Fuploads%2F2022%2F01%2Fimage-6.png&w=3840&q=75)
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.