Vuetify - 如何设置背景颜色

Question

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

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

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

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

原文由 Cindy Conway 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你有正确的方法。你只需要先导入vuetify的主题文件，这样就定义了 material-light 变量：

 // main.styl

@import '~vuetify/src/stylus/theme.styl'

$material-light.background = #fff

@import '~vuetify/src/stylus/main.styl'

---

Vuetify 2.0 更新

Vuetify 在 2.0 中切换到 SASS，所以语法略有不同。按照 指南 正确设置 sass-loader，然后将其添加到 variables.scss 文件中：

 $material-light: (
  'background': #fff
);

不再需要主题和主要导入，并且地图由 vuetify 合并，因此您只需定义要更改的键。

原文由 Ziemek Trzesicki 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

Vuetifty 主题参考

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

 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>

原文由 BlueFrog 发布，翻译遵循 CC BY-SA 4.0 许可协议