vue.js - Vuetify - 如何设置背景颜色

Question

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

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

我遵循了 docs 中的所有步骤，我可以通过在我的 main.styl 文件中设置 $body-font-family = 'Open Sans' 来更改整个应用程序的字体(所以我知道我已经正确设置了 webpack 构建)

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

Answer 1

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

Vuetifty Theme Referance

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

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>