Vuetify - How to set background color

Question

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.

Answer 1

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>

Answer 2

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.

Answer 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'

Answer 4

To change the background colour simply...

<v-app class="white">

for text color

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

Answer 5

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

Answer 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.

Answer 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).

Answer 8

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>

Answer 9

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,
));

Answer 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}">

Answer 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

Answer 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.

Answer 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 }