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

在主容器上，class 将默认浅灰色设置为背景色 .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 属性即复制粘贴默认代码和设置我想要的背景颜色。

Answer 2

你的方法是对的。只需要先导入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，因此语法略有不同。按照 the guide 正确设置 sass-loader，然后将其添加到您的 variables.scss 文件中：

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

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

Answer 3

直接注入css代码，即可解决。检查浏览器上的代码并找出 class 或 ID 名称。转到您的组件，在样式部分编写您的代码，例如：我检查了代码并找出 class 名称，class 名称是 [= 内的 '.v-picker_body' 15=]有个div。我需要更改 div 的背景颜色。所以在这里 -

<style>
 .v-picker__body > div{
    background-color: #F44336;
 }
</style>

Answer 4

要简单地更改背景颜色...

<v-app class="white">

文字颜色

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

Answer 5

看看 Vuetify Themes，在那里你可以做类似的事情：

<v-app dark>
...
</v-app>

例如应用深色主题。这是首选方式，因为它还修改了 vuetify 附带的所有 "standard colors"（例如 danger、primary 等）。

如果你需要快速和肮脏，你也可以 应用 classes 或 styles 到 <v-app>:

<v-app style="
  background: #3A1C71;
  background: -webkit-linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
  background: linear-gradient(to right, #FFAF7B, #D76D77, #3A1C71);
">

可与深色主题(source)结合使用。

Answer 6

对于 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 来切换 light/dark 背景。

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

覆盖深色主题背景颜色

就我个人而言，我觉得这是一种非常干净的方式。像这样在 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 8

我尝试使用上述方法更改 light/dark 主题默认背景颜色，但是它不起作用！！！这是我所做的

在./src/scss/main.scss

下添加新样式文件

// src/scss/main.scss
@import '~vuetify/src/styles/styles.sass'
$new-colors: (
    'app-bar': map-get($red, 'lighten-4') !important,
    'background': map-get($red, 'lighten-4') !important,
    'cards': map-get($red, 'lighten-4') !important,
    'bg-color': map-get($red, 'lighten-4') !important,
    'fg-color': map-get($red, 'lighten-4') !important,
    'text-color': map-get($red, 'lighten-4') !important,
    'buttons': (
      'disabled': map-get($red, 'lighten-4') !important,
      'focused': map-get($red, 'lighten-4') !important,
      'focused-alt': map-get($red, 'lighten-4') !important,
      'pressed': map-get($red, 'lighten-4') !important,
    ),
);
$material-light: map-merge($material-light, $new-colors);
$material-dark: map-merge($material-dark, $new-colors);
@debug $material-light;

@import '~vuetify/src/styles/main.sass';
@import '~vuetify/src/components/VBtn/_variables.scss';

然后我从 ./src/main.js 导入了这个文件，如下所示：

// ./src/main.js 
import Vue from 'vue';
import vuetify from './plugins/vuetify';
import './scss/main.scss';

new Vue({
    vuetify,
    beforeCreate() {
        console.log('Before our APP is created');
    },
    mounted() {
        console.log('Our APP is being mounted now.');
    },
    render: function(h) {
        return h(App);
    }
}).$mount('#app');

我正在使用 vue 2.6.7 和 vuetify 2.1.7

Answer 9

我发现更改背景的最简单方法是：

在 /src/plugins/vuetify.js

中设置背景颜色

import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import colors from 'vuetify/lib/util/colors';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
  theme: {
    dark: true,
    themes: {
      dark: {
        background: colors.grey.darken4,
      }
    }
  }
});

然后将其绑定到您的 v-app 组件。

<v-app v-bind:style="{ background: $vuetify.theme.themes.dark.background}">

Answer 10

还有一个解决方案：

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

详情：

Answer 11

我为 Vetify.js 2 和 Nuxt.js 写了一篇结合以上解决方案的短文：Changing Background Color in Vuetify.js and Nuxt.js - 我认为有人可能会觉得它很有趣。

基本上这个想法是使用自定义背景颜色：

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  theme: {
    options: {
      customProperties: true
    },
    dark: true,
    themes: {
      dark: {
        background: '#00a86b'
      },
      light: {
        background: '#d0f0c0'
      }
    }
  }
}

并在variables.scss中应用：

@import '~vuetify/src/styles/styles.sass';
$material-light: map-merge($material-light, (
  'background': var(--v-background-base, map-get($material-light, 'background')) !important,
));
$material-dark: map-merge($material-dark, (
  'background': var(--v-background-base, map-get($material-dark, 'background')) !important,
));

Answer 12

在组件的 root 级别上，要使所有 page/route/view 具有相同的颜色：

<template>
  <div style="background-color: #333">
    ...
  </div>
</template>

在这里，组件的 root 元素是 <div>，但是您几乎可以拥有任何您想要的元素。它适用于 <section>、<v-layout> 等

Answer 13

只需更改 v-app 样式

 <v-app style="background-color:black; color:white">
        
 </v-app>

主样式文件中相同

main.css

body { background-color: black; color: white }

Answer 14

对于当前 vuetify v2.5.5 有此问题的任何人，只需将此行添加到您的 variable.scss 文件：

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

将 #e5e5e5 替换为您想要的颜色。

Answer 15

v-app 标签默认包含属性 'id="app"'。要更改样式：

<style>
#app {
  background: #FFFFFF;
}
</style>

Vuetify - 如何设置背景颜色

Vuetify - How to set background color

vue.js

vuetify.js

Vuetify 2.0 更新

覆盖深色主题背景颜色