问题:如何更改vuetify主题背景颜色

默认的 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 的答案

如何在 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",

解答

好吧,除了一件事,一切几乎都是正确的。

您需要拥有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,
    ),
  )
);

这里发生的是我们正在覆盖node_modules/vuetify/src/styles/settings/_dark.scss中存在的$material-dark变量。在这里,您可以使用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. 使用<div class="header lighten-2" />变亮变体

关于颜色的更多信息

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