Vuetify - 如何设置背景颜色

Question

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

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

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

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

Answer 1

覆盖深色主题背景色

就个人而言，我觉得这是一种非常干净的方式。在 vuetify.js 中设置你的背景颜色，如下所示：

export default new Vuetify({
  theme: {
    options: {
      customProperties: true,
    },
    themes: {
      dark: {
        background: '#292930',
      },
    },
      dark: true,
  },
});

然后将其添加到您的 css 文件（例如“app.css”，在项目根目录中）：

.v-application {
    background-color: var(--v-background-base) !important;
}

在你的 App.Vue 中，只需导入 css 文件：

import styles from './app.css'

Answer 2

你有正确的方法.您只需要先导入vuetify的主题文件,以便material-light定义变量:

//main.styl

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

$material-light.background = #fff

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

Answer 3

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

Answer 4

简单地改变背景颜色...

<v-app class="white">

对于文字颜色

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

Answer 5

还有另一种解决方案：

在 vuetify.js 中：

export default new Vuetify({
    theme: {
        themes: {
            light: {
                primary: '#e20074',
                secondary: '#6c757d',
                accent: '#3ea2fb',
                error: '#dc3545',
                petrol: '#17a499',
                background: '#fff',
            }
        },
        options: {
            customProperties: true
        },
    },
})

在 App.vue 中：

<v-app id="app">
...
</app>

<style>
#app {
    background-color: var(--v-background-base);
}
</style>

详情：https : //stackoverflow.com/a/48285278/506764

Answer 6

在主容器上，类将默认的浅灰色设置为背景色.application.theme--light（或深色，取决于您使用的是什么）。

在 vuetify 中，此颜色设置在src/stylus/settings/_theme.styl：

$material-light := {
  status-bar: {
    regular: #E0E0E0,
    lights-out: rgba(#fff, .7)
  },
  app-bar: #F5F5F5,
  background: #FAFAFA, // here
  cards: #FFFFFF,

不幸的是，我没有找到任何简单的方法来专门覆盖背景颜色（因为颜色是直接定义的）所以我最终覆盖了整个material-light属性，即复制粘贴默认代码并设置我想要的背景颜色。