vuetify.js - 努克斯特 | Vuetify 主题 - 如何更改颜色？

Question

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

例如

html, body {
  color: red
}

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

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

Answer 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>