如何在Nuxt / Vuetify入门模板上更改主题颜色

Question

更改颜色

我正在尝试将 Vue 与 Nuxt 和 Vuetify 用于样式，在 Vuetify 上存在许多模板，其中一个带来了所有模板。

我试图在/assets/style/app.style 上添加颜色，但没有效果。

同样在/plugins/vueitfy 上.js添加类似以下内容的内容：

Vue.use(Vuetify, {
    theme: {
     header: '#48393C',
     footer: '#2f3542'
    }
})

没有效果，我认为最后一种方法是最好的方法。

Answer 1

在Vuetify 2中，例如，如果要 ro 覆盖background colour ( nuxt js (：

1. 创建.assetsstylevariables.scss

    @import '~vuetify/src/styles/styles.sass';
    $material-light: map-merge($material-light, (
            background: map-get($blue, 'lighten-5'),
            calendar: (background-color: red),
    )
    );

2. 在nuxt.config.js中添加：

    import colors from 'vuetify/lib/util/colors'

    buildModules: ['@nuxtjs/vuetify'],
    vuetify: {
        treeShake: true,
        customVariables: ['~/assets/style/variables.scss']
        theme: {
            options: {customProperties: true},
            themes: {
                light: {
                    primary: colors.blue.lighten5,
                    secondary: colors.amber.darken3,
                    accent: colors.grey.darken3,
                    info: colors.teal.lighten1,
                    warning: colors.amber.base,
                    error: colors.deepOrange.accent4,
                    success: colors.green.accent3
                }
    }

更多信息：

1. https://vuetifyjs.com/ru/customization/sass-variables

2. https://vuetifyjs.com/ru/customization/theme

Answer 2

有两个选项可以更改颜色主题1. 来自/plugins/vueitfy.js

    Vue.use(Vuetify, {
  theme: {
    primary: '#2c3e50',
    secondary: '#1abc9c',
    accent: '#2980b9',
    error: '#e74c3c',
    action: '#23DB2A'
  }})

2. 来自/assets/style/appl.styl，在 vuetify 的要求之前

$theme := { primary: '#2c3e50', secondary: '#1abc9c', accent: '#2980b9', error: '#e74c3c', action: '#23DB2A' }

页眉和页脚不能用作颜色主题属性