vue.js - 如何更改 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
}

我想控制所有的背景颜色。
我尝试了 Dmitry Kaltovich 的答案
How To change theme colors on Nuxt/Vuetify starter template
通过拥有这样的自定义 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在不同的版本中以不同的方式获取额外的数据。 more information about 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.它们将添加亮/暗变体。
这些值可以以几种不同的方式使用:

与 color/background/background-color Prop 喜欢<v-btn color="header" />

申请类(class)背景<div class="primary" />或定制 <div class="footer" />

应用字体颜色与类 <div class="primary--text" />或定制 <div class="header--text" />

使用带有 <div class="header lighten-2" /> 的 lighten 变体

more info about colors
因此，您在此处添加的值不是为了覆盖组件默认值，而是为了创建额外的颜色或覆盖 primary, success, error etc.颜色。