Question

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

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

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

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

Answer 1

您采用正确的方法。您只需要先导入vuetify的主题文件，即可定义material-light变量：

//main.styl

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

$material-light.background = #fff

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

Answer 2

还有另一种解决方案：

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

在主容器上，将默认浅灰色作为背景颜色的类设为.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 4

要覆盖深色主题背景颜色

我个人认为这是一种非常干净的方法。像这样在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 5

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

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

Answer 6

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

在您的 /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 7

我结合上述解决方案为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 8

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

<v-app class="white">

用于文本颜色

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

Answer 9

看看 Vuetify Themes ，您可以在其中执行以下操作：

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

例如，要应用深色主题。这是首选方法，因为它还会修改所有与vuetify关联的“标准颜色”（例如危险，原色等）。

如果您需要快速又脏的话，还可以将class或style应用于<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 10

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

Answer 11

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

在./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 12

在组件的root级别上，以相同的颜色显示所有页面/路线/视图：

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

Vuetify - 如何设置背景颜色

13 个答案:

要覆盖深色主题背景颜色