努克特 | Vuetify 主题 - 如何更改颜色？答案

【问题标题】：Nuxt | Vuetify themes - how to change color?努克特 | Vuetify 主题 - 如何更改颜色？
【发布时间】：2020-12-30 20:02:27
【问题描述】：

如何更改 Vuetify 深色主题中的全局 color 属性？

比如

html, body {
  color: red
}

我尝试通过 variables.scss 设置它，但我找不到合适的变量名。

是否有这个变量或者我应该如何改变颜色？

【问题讨论】：

标签： vuetify.js nuxt.js

【解决方案1】：

有几种方法。如果你想使用variables.scss，你需要在nuxt.config.js中启用treeshaking

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true, // add this line
  },

否则，如果您想定义自己的颜色，也可以在同一个配置对象中进行。然后你就可以在你的 vue 模板中的任何地方使用。

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      themes: {
        light: {
          myawesomecolour: '#D78480', //#RRGGBB or from the colors packages
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

或者在layouts/default.vue中插入一个样式标签并放入你的自定义css

<style>
  html, body {
    color: red;
  }
</style>

【讨论】：