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.

BlueFrog · Answer 1 · 2020-02-25T20:55:55.790

93

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>

edited Feb 25 '20 at 20:55

answered Jul 28 '19 at 08:31

BlueFrog

1,147
1
7
15

3

real nice. Worked for me using: `````` – JTInfinite Nov 20 '19 at 14:10
I used a computed theme to be able to have a different background color for light and dark themes. If you force dark theme, just use dark :) – BlueFrog Nov 24 '19 at 02:20
1

brilliant! by far simplest solution i saw in about an hour of searching / experimenting – Ryan Skene Jan 06 '20 at 03:17
5

should be the accepted answer, also why is this so hard to override styling – Akin Hwan Feb 22 '20 at 02:58
3

It might apply the background color for the container, but not for the sub components. – Abdelillah Aissani Aug 04 '20 at 06:02
@AbdelillahAissani True, but for all other components, you can change the background in a similar manner. – BlueFrog Feb 16 '21 at 19:41

score 34 · Accepted Answer · edited Jan 15 '20 at 12:51

34

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.

edited Jan 15 '20 at 12:51

Kael Watts-Deuchar

4,213
1
26
50

answered Aug 11 '18 at 18:58

Ziemek Trzesicki

356
3
3

1

This works... Thanks! https://vuetifyjs.com/en/style/theme#stylus-guide – Mike Loffland Sep 15 '18 at 00:40
This works, any idea how to set the primary, secondary, accent colors through stylus? – memic84 Nov 05 '18 at 10:57
Using vue-cli, all I needed to do was create src/styles/variables.scss and add the code shown under Vuetify 2.0 update and it worked a treat. Thanks! – Paul Taylor Jan 15 '21 at 02:39

score 21 · Answer 3 · answered Oct 12 '19 at 08:13

21

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'

answered Oct 12 '19 at 08:13

svenema

1,766
2
23
45

Incredible answer, but I've got to use a scss file because it didn't recognize `var(--v-background-base)`. – Eduardo Jiménez Jul 04 '21 at 06:23
@EduardoJiménez make sure you also set `themes: light: { ... }` if you use the light theme, and check you have `options: { customProperties: true }` which generates the CSS variables - https://vuetifyjs.com/en/features/theme/#custom-properties – Dunc Jan 07 '22 at 15:45
This works for me, but do you mind to explain how this line `var(--v-background-base)` works? – jet_choong Mar 11 '22 at 09:15
Ah - ok, I found the documentation for this https://vuetifyjs.com/en/features/theme/#custom-properties (for vuetify 2.x) – jet_choong Mar 11 '22 at 09:20

score 12 · Answer 4 · answered May 30 '19 at 21:41

12

To change the background colour simply...

<v-app class="white">

for text color

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

answered May 30 '19 at 21:41

Steve Dench

121
1
3

Other colours than white work this way but for a white background you have to use ``. See https://vuetifyjs.com/en/styles/colors/#material-colors – RWAM Jun 07 '21 at 10:04

score 12 · Answer 5 · answered Jan 13 '20 at 16:15

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

This is the simplest solution – Toni Michel Caubet Jan 24 '22 at 11:02 — Toni Michel Caubet, Jan 24 '22 at 11:02

score 5 · Answer 6 · answered May 11 '18 at 00:53

5

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.

answered May 11 '18 at 00:53

m4rtin

2,445
22
34

I did the same. Let me know if you find a way to only overwrite a single attribute . – Flink Jul 18 '18 at 10:20
Where did you place the override? If I put it before the stylus import I got errors and if I place it after the import, the override does not work. Thanks – Mario Aug 11 '18 at 15:27
2

And how could this be done when working with a-la-carte components? They directly import their styles from the theme defined in the library... – Raymundus Aug 31 '18 at 14:50

loomchild · Answer 7 · 2021-02-18T10:08:26.403

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

score 3 · Answer 8 · answered Jul 07 '19 at 06:49

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

score 2 · Answer 9 · answered Jan 26 '19 at 07:01

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>

chess_madridista · Answer 10 · 2022-05-02T08:07:41.970

2

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

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

edited May 02 '22 at 08:07

answered Mar 20 '22 at 13:44

chess_madridista

161
1
8

score 1 · Answer 11 · answered Nov 01 '19 at 22:47

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

Ahmad Moghazi · Answer 12 · 2021-02-09T01:13:34.303

1

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 }

edited Feb 09 '21 at 01:13

answered Jan 04 '21 at 21:11

Ahmad Moghazi

1,419
13
15

score 0 · Answer 13 · answered Oct 28 '19 at 21:00

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

score 0 · Answer 14 · answered Nov 14 '20 at 17:26

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.

score 0 · Answer 15 · answered Sep 14 '21 at 06:45

0

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.

answered Sep 14 '21 at 06:45

symplytheo

1,661
1
5
4

Vuetify - How to set background color

15 Answers15

Vuetify 2.0 update

To override the dark theme background color

Linked