'Vuetify - How to set background color

I am using Vuetify with the Light theme. By default this sets the background of the main content to a light grey. I need it to be white.

I'd like to override this by modifying the stylus variables, but I can't seem to figure out which variable sets the background color.

I followed all the steps in the docs, and I can change the font throughout the app by setting $body-font-family = 'Open Sans' in my main.styl file (so I know I have the webpack build set up correctly)

I have tried $body-bg-light = '#fff' in my main.styl, but that doesn't seem to change anything at all. If I set $material-light.background = '#fff' I get an error.

vue.js vuetify.js

Solution 1:^[1]

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.

Solution 2:^[2]

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>

Solution 3:^[3]

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'

Solution 4:^[4]

There is another solution:

In vuetify.js:

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: '#e20074',
                secondary: '#6c757d',
                accent: '#3ea2fb',
                error: '#dc3545',
                petrol: '#17a499',
                background: '#fff',
            }
        },
        options: {
            customProperties: true
        },
    },
})

In App.vue:

<v-app id="app">
...
</app>

<style>
#app {
    background-color: var(--v-background-base);
}
</style>

Details: https://stackoverflow.com/a/48285278/506764

Solution 5:^[5]

To change the background colour simply...

<v-app class="white">

for text color

<v-app class="grey--text text--darken-2">

Solution 6:^[6]

On the main container, the class setting the default light grey color as background color is .application.theme--light (or dark, depending on what you're using).

Within vuetify, this color is set up in src/stylus/settings/_theme.styl :

$material-light := {
  status-bar: {
    regular: #E0E0E0,
    lights-out: rgba(#fff, .7)
  },
  app-bar: #F5F5F5,
  background: #FAFAFA, // here
  cards: #FFFFFF,

Unfortunately, I didn't find any easy way to override the background color specifically (since the color is defined directly) so I ended up overriding the whole material-light property i.e copy-pasting the default code and setting the background color I wanted.

Solution 7:^[7]

Have a look at Vuetify Themes, where you could do something like:

<v-app dark>
...
</v-app>

To apply a dark theme, for instance. This is the preferred way as it also modifies all "standard colors" that go with vuetify (such as danger, primary, etc.).

If you need to be quick and dirty, you can also apply classes or styles to the <v-app>:

<v-app style="
  background: #3A1C71;
  background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
  background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
">

Which can be used in conjunction with the dark theme (source).

Solution 8:^[8]

I wrote a short article for Vetify.js 2 and Nuxt.js combining above solutions: Changing Background Color in Vuetify.js and Nuxt.js - I thought someone might find it interesting.

Basically the idea is to use custom background color:

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  theme: {
    options: {
      customProperties: true
    },
    dark: true,
    themes: {
      dark: {
        background: '#00a86b'
      },
      light: {
        background: '#d0f0c0'
      }
    }
  }
}

And apply it in variables.scss:

@import '~vuetify/src/styles/styles.sass';
$material-light: map-merge($material-light, (
  'background': var(--v-background-base, map-get($material-light, 'background')) !important,
));
$material-dark: map-merge($material-dark, (
  'background': var(--v-background-base, map-get($material-dark, 'background')) !important,
));

Solution 9:^[9]

Direct injecting of css code, it can be solved. Inspect the code on your browser and find out the class or id name. Go to your component, in style section write your code as for example: I have inspected the code and find out the class name, class name is '.v-picker_body' inside the class there is a div. i need to change the div's background color. So here it is-

<style>
 .v-picker__body > div{
    background-color: #F44336;
 }
</style>

Solution 10:^[10]

The easiest way I found to change the background was that:

Set the background color in your /src/plugins/vuetify.js

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

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
  theme: {
    dark: true,
    themes: {
      dark: {
        background: colors.grey.darken4,
      }
    }
  }
});

And then bind it to your v-app component.

<v-app v-bind:style="{ background: $vuetify.theme.themes.dark.background}">

Solution 11:^[11]

I tried to change the light/dark theme default background color using the method above, however it does not work!!! here is what I did

add new style file under ./src/scss/main.scss

// src/scss/main.scss
@import '~vuetify/src/styles/styles.sass'
$new-colors: (
    'app-bar': map-get($red, 'lighten-4') !important,
    'background': map-get($red, 'lighten-4') !important,
    'cards': map-get($red, 'lighten-4') !important,
    'bg-color': map-get($red, 'lighten-4') !important,
    'fg-color': map-get($red, 'lighten-4') !important,
    'text-color': map-get($red, 'lighten-4') !important,
    'buttons': (
      'disabled': map-get($red, 'lighten-4') !important,
      'focused': map-get($red, 'lighten-4') !important,
      'focused-alt': map-get($red, 'lighten-4') !important,
      'pressed': map-get($red, 'lighten-4') !important,
    ),
);
$material-light: map-merge($material-light, $new-colors);
$material-dark: map-merge($material-dark, $new-colors);
@debug $material-light;

@import '~vuetify/src/styles/main.sass';
@import '~vuetify/src/components/VBtn/_variables.scss';

Then I imported this file from ./src/main.js like this:

// ./src/main.js 
import Vue from 'vue';
import vuetify from './plugins/vuetify';
import './scss/main.scss';

new Vue({
    vuetify,
    beforeCreate() {
        console.log('Before our APP is created');
    },
    mounted() {
        console.log('Our APP is being mounted now.');
    },
    render: function(h) {
        return h(App);
    }
}).$mount('#app');

I am using vue 2.6.7 and vuetify 2.1.7

Solution 12:^[12]

On a root level of a component, to have all page/route/view in the same color:

<template>
  <div style="background-color: #333">
    ...
  </div>
</template>

Here, the root element for a component that's <div>, however you can have almost any you'd like to. It works on <section>, <v-layout> etc.

Solution 13:^[13]

Just Change v-app Style

 <v-app style="background-color:black; color:white">
        
 </v-app>

Same in main style file

main.css

body { background-color: black; color: white }

Solution 14:^[14]

For anyone having this issue with the current vuetify v2.5.5, simply add this line to your variable.scss file:

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

Replace #e5e5e5 with your desired color.

Solution 15:^[15]

The v-app tag contains an attribute 'id="app"' by default. To change the styling:

<style>
#app {
  background: #FFFFFF;
}
</style>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Kael Watts-Deuchar
Solution 2
Solution 3	svenema
Solution 4	Evghenii Orenciuc
Solution 5	Steve Dench
Solution 6	m4rtin
Solution 7	acdcjunior
Solution 8
Solution 9	Ziaur Rahman
Solution 10	Rodrigo Tadewald
Solution 11	Mohamed Termoul
Solution 12	Daniel Danielecki
Solution 13
Solution 14	symplytheo
Solution 15

'Vuetify - How to set background color

Solution 1:[1]

Vuetify 2.0 update

Solution 2:[2]

Solution 3:[3]

To override the dark theme background color

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]