Vuetify-如何设置背景色

vue.js Vue.js

LEY宝儿神奇

2020-03-17

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

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

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

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

第1885篇《Vuetify-如何设置背景色》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
小宇宙猴子 2020.03.17

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

<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);
">

可以与深色主题（源）结合使用。

Tom老丝Pro 2020.03.17

在主容器上，将默认的浅灰色设置为背景色的类是.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属性，即复制粘贴默认代码并设置所需的背景颜色。

Jim米亚 2020.03.17

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

<v-app class="white">

文字颜色

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android