Vuetify - How to set background color

With Vuetify 2.0, I would like to propose my solution:

Vuetifty Theme Referance

Follow the documentation as usual with setting up custom theming, except add another variable (background in my case).

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, // Not automatically applied        ...      },      dark: {        primary: colors.blue.lighten3,         background: colors.indigo.base, // If not using lighten/darken, use base to return hex        ...      },    },  },})

But we are not done! The background variable doesn't cut it. We need to rig v-app to toggle the light/dark backgrounds.

<template>  <v-app id="main" :style="{background: $vuetify.theme.themes[theme].background}">    <v-content>        Stuff :)    </v-content>  </v-app></template><script>export default {  name: 'App',  computed:{    theme(){      return (this.$vuetify.theme.dark) ? 'dark' : 'light'    }  }};</script>

You have the right approach. You only need to import vuetify's theme file first so that the material-light variable is defined:

// main.styl@import '~vuetify/src/stylus/theme.styl'$material-light.background = #fff@import '~vuetify/src/stylus/main.styl'

Vuetify 2.0 update

Vuetify switched to SASS in 2.0, so the syntax is slightly different. Follow the guide to set up sass-loader properly, then add this to your variables.scss file:

$material-light: (  'background': #fff);

The theme and main imports are no longer needed, and maps are merged by vuetify so you only have to define keys you want to change.

To override the dark theme background color

Personally, I find this a very clean way.Set your background color in vuetify.js like so:

export default new Vuetify({  theme: {    options: {      customProperties: true,    },    themes: {      dark: {        background: '#292930',      },    },      dark: true,  },});

Then add this to your css file (eg. "app.css", in the project root):

.v-application {    background-color: var(--v-background-base) !important;}

And in your App.Vue, simply import the css file:

import styles from './app.css'