我正在使用带有 Light 主题的 Vuetify。默认情况下，这会将主要内容的背景设置为浅灰色。我需要它是白色的。
我想通过修改手写笔变量来覆盖它，但我似乎无法弄清楚哪个变量设置了背景颜色。
我按照docs 中的所有步骤进行操作，并且可以通过在 main.styl 文件中设置 $body-font-family = 'Open Sans' 来更改整个应用程序的字体（所以我知道我的 webpack 构建设置正确）
我在 main.styl 中尝试过 $body-bg-light = '#fff'，但这似乎并没有改变任何东西。如果我设置$material-light.background = '#fff' 我会得到一个错误。
【问题讨论】：
标签： vue.js vuetify.js
对于 Vuetify 2.0，我想提出我的解决方案：
像往常一样按照文档设置自定义主题，除了添加另一个变量（在我的例子中是背景）。
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>
【讨论】：
<v-app :style="{background: $vuetify.theme.themes.dark.background}">
你有正确的方法。只需要先导入vuetify的主题文件，这样material-light变量就定义好了：
// main.styl
@import '~vuetify/src/stylus/theme.styl'
$material-light.background = #fff
@import '~vuetify/src/stylus/main.styl'
Vuetify 在 2.0 中切换到 SASS，因此语法略有不同。按照the guide 正确设置 sass-loader，然后将其添加到您的 variables.scss 文件中：
$material-light: (
'background': #fff
);
不再需要主题和主要导入，并且地图由 vuetify 合并，因此您只需定义要更改的键。
【讨论】：
就个人而言，我觉得这是一种非常干净的方式。 像这样在 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'
【讨论】：
var(--v-background-base)。
还有一个解决办法：
在 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>
【讨论】：
简单地改变背景颜色...
<v-app class="white">
文字颜色
<v-app class="grey--text text--darken-2">
【讨论】：
<v-app class="shades white">。见vuetifyjs.com/en/styles/colors/#material-colors
在主容器上，将默认浅灰色设置为背景色的类为.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 属性，即复制粘贴默认代码并设置背景颜色我想要。
【讨论】：
查看 Vuetify Themes，您可以在其中执行以下操作：
<v-app dark>
...
</v-app>
例如，应用深色主题。这是首选方式，因为它还修改了与 vuetify 一起使用的所有“标准颜色”（例如危险、主要等）。
如果你需要又快又脏，你也可以申请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）结合使用。
【讨论】：
我为 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,
));
【讨论】：
直接注入css代码，可以解决。检查浏览器上的代码并找出类或 id 名称。转到您的组件，在样式部分中编写您的代码，例如：我检查了代码并找出类名，类名是“.v-picker_body”，类中有一个 div。我需要更改 div 的背景颜色。所以这里是-
<style>
.v-picker__body > div{
background-color: #F44336;
}
</style>
【讨论】：
我发现更改背景的最简单方法是：
在 /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}">
【讨论】：
我尝试使用上面的方法更改浅色/深色主题默认背景颜色，但是它不起作用！！！这就是我所做的
在./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
【讨论】：
在组件的root 级别上，使所有页面/路由/视图具有相同的颜色：
<template>
<div style="background-color: #333">
...
</div>
</template>
这里是root 组件的<div> 元素，但是您几乎可以拥有任何想要的元素。它适用于<section>、<v-layout> 等。
【讨论】：
只需更改 v-app 样式
<v-app style="background-color:black; color:white">
</v-app>
在主样式文件中相同
main.css
body { background-color: black; color: white }
【讨论】：
对于当前vuetify v2.5.5 存在此问题的任何人，只需将此行添加到您的variable.scss 文件中：
$material-light: ( 'background': #e5e5e5 );
用你想要的颜色替换#e5e5e5。
【讨论】：