Sometimes, we want to set background color with Vuetify

In this article, we’ll look at how to set background color with Vuetify.

How to set background color with Vuetify?

To set background color with Vuetify, we can add our own theme colors.

For instance, we write

import Vue from "vue";
import Vuetify from "vuetify/lib";
import colors from "vuetify/lib/util/colors";

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.purple,
        secondary: colors.grey.darken1,
        accent: colors.shades.black,
        error: colors.red.accent3,
        background: colors.indigo.lighten5,
        //...
      },
      dark: {
        primary: colors.blue.lighten3,
        background: colors.indigo.base,
        //...
      },
    },
  },
});
//...

to add the background color in addition to the existing theme colors.

Then we can apply the background color by writing

<template>
  <v-app
    id="main"
    :style="{ background: $vuetify.theme.themes[theme].background }"
  >
    <v-content> ... </v-content>
  </v-app>
</template>

where theme is the property key that we have in themes.

Conclusion

To set background color with Vuetify, we can add our own theme colors.