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

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