时间戳

首页 > 解决方案 > 努克特 | Vuetify 主题 - 如何更改颜色？

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

问题描述

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

像例如

html, body {
  color: red
}

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

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

标签： vuetify.jsnuxt.js

解决方案

有几种方法。如果你想使用你variables.scss需要启用treeshakingnuxt.config.js

  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>

推荐阅读