如何更改 vuetify 主题背景颜色答案

【问题标题】：How do I change the vuetify theme background color如何更改 vuetify 主题背景颜色
【发布时间】：2021-03-11 15:34:24
【问题描述】：

默认的 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",

【问题讨论】：

标签： vue.js sass nuxt.js vuetify.js

【解决方案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,
    ),
  )
);

这里发生的情况是我们覆盖了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.，它们将添加变亮/变暗变体。

这些值可以以几种不同的方式使用：

使用 color/background/background-color 像 <v-btn color="header" /> 这样的道具
使用类<div class="primary" />或自定义<div class="footer" />应用背景
使用<div class="primary--text" /> 类或自定义<div class="header--text" /> 应用字体颜色
使用带有<div class="header lighten-2" /> 的变亮变体

more info about colors

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

【讨论】：