Vuetify - 如何设置背景颜色

我正在使用带有 Light 主题的 Vuetify。默认情况下，这会将主要内容的背景设置为浅灰色。我需要它是白色的。

我想通过修改手写笔变量来覆盖它，但我似乎无法弄清楚哪个变量设置背景颜色。

我按照中的所有步骤进行了操作docs https://vuetifyjs.com/en/style/theme，我可以通过设置更改整个应用程序的字体$body-font-family = 'Open Sans'在我的 main.styl 文件中（所以我知道我已经正确设置了 webpack 构建）

我努力了$body-bg-light = '#fff'在我的 main.styl 中，但这似乎根本没有改变任何东西。如果我设置$material-light.background = '#fff'我收到一个错误。

对于 Vuetify 2.0，我想提出我的解决方案：

Vuetify 主题参考 https://vuetifyjs.com/en/customization/theme

像往常一样按照文档设置自定义主题，除了添加另一个变量（在我的例子中是背景）。

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

但我们还没有完成！这background变量不会削减它。我们需要装备v-app切换浅色/深色背景。

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