如何更改 vuetify 主题背景颜色

Question

默认的 vuetify 主题需要调整的属性非常有限。

dark: {
    primary: '#3739FF',
    accent: '#101721',
    secondary: colors.amber.darken3,
    info: colors.teal.lighten1,
    warning: colors.amber.base,
    error: colors.deepOrange.accent4,
    success: colors.green.accent3
}

我想控制所有背景颜色。

我尝试了德米特里·卡尔托维奇的答案

如何更改 Nuxt/Vuetify 入门模板上的主题颜色

通过像这样的自定义 scss 文件

@import '~vuetify/src/styles/styles.sass';

$material-dark: map-merge(
  $material-dark,
  (
    background: map-get($blue, 'lighten-5'),
  )
);

我的 nuxt 配置是这样的

vuetify: {
    treeShake: true,
    customVariables: ['~/assets/scss/vuetify.scss'],
    theme: {
        dark: true,
        themes: {
            options: {customProperties: true},
            dark: {
                primary: '#3739FF',
                accent: '#101721',
                secondary: colors.amber.darken3,
                info: colors.teal.lighten1,
                warning: colors.amber.base,
                error: colors.deepOrange.accent4,
                success: colors.green.accent3
            }
        }
    }
},

但是不起作用。

我正在使用

"nuxt": "^2.14.6",
"@nuxtjs/vuetify": "^1.11.2",
"sass": "^1.29.0",
"sass-loader": "^7.3.1"
"fibers": "^5.0.0",
"node-sass": "^5.0.0",

Answer 1

嗯，除了一件事之外，一切都几乎正确。

您需要有

sass-loader

版本 8.x 才能使其与

customVariables:

部分配合使用。使用

npm install -D sass-loader@8

安装它，这是因为

sass-loader

在不同版本中以不同的方式获取附加数据。 有关 sass-loader 的更多信息

之后，您应该能够通过编辑

vuetify.scss

文件来覆盖框架变量。

/* Example of `~assets/scss/vuetify.scss` */

@import '~vuetify/src/styles/styles.sass';

// theme to override, same applies for $material-light
$material-dark: map-merge(
  $material-dark,
  (
    'background': rgb(130, 130, 130),
    'text': (
      'primary': map-get($grey, 'lighten-2'),
    ),
    'calendar': (
      background-color: red,
    ),
  )
);

这里发生的事情是我们重写

$material-dark

中存在的

node_modules/vuetify/src/styles/settings/_dark.scss

变量。在这里，您可以使用

node_modules/vuetify/src/styles/settings/_colors.scss

中存在的任何静态值或预定义框架颜色，借助

map-get

函数，因为颜色被定义为键值对。因此，您可以使用这种方法做的是，只需在

_dark.scss

中找到您想要覆盖的背景值（或其他任何值），以实现深色主题。

注意，这种方法是覆盖框架默认值。如果您想定义任何颜色然后在组件内部使用，这种方法可能不是您想要的，这最适合覆盖默认值。

第二种方法是定义

vuetify.theme.themes.dark

中存在于

nuxt.config.js

中的颜色

vuetify: {
    treeShake: true,
    customVariables: ['~/assets/scss/vuetify.scss'],
    theme: {
      dark: true,
      themes: {
        options: { customProperties: true },
        dark: {
          header: '#3739FF',
          footer: '#101721'
        },
      },
    },
  },

Vuetify 默认提供

primary, secondary, accent, info, warning, error, success

。如果您更改其中任何值，它们将被您的值覆盖。如果您添加任何其他值，例如

header, footer, etc.

，它们将添加变亮/变暗变体。

这些值可以通过多种不同的方式使用：

1. 带有

   color/background/background-color

   道具，如

   <v-btn color="header" />

2. 使用班级

   <div class="primary" />

   或自定义

   <div class="footer" />

应用背景
3. 使用类

   <div class="primary--text" />

   或自定义

   <div class="header--text" />

应用字体颜色
4. 使用 lighten 变体与

   <div class="header lighten-2" />

有关颜色的更多信息

因此，您在此处添加的值并不是为了覆盖组件默认值，只是为了创建额外的颜色或覆盖

primary, success, error etc.

颜色。

Answer 2

App.vue 会自动检测所有待办事项中的颜色，以便自动检测属性，例如

• 背景：“#00ACC1”

por lo tanto el App.vue quedaria como：

  <template>
  <v-app>
    <RouterView />
  </v-app>
</template>

<script setup lang="ts">
import { RouterView } from "vue-router";
</script>

<style scoped>
</style>
 

这是重要的 v-app 趋势，也是我们思考的逻辑。 todo lo que este fuera del respetara los colores como 小学、中学...除了背景。