Question

我正在使用Nuxt.js + Vuetify.js项目

查看我们拥有的文件assets/style/app.styl

// Import and define Vuetify color theme
// https://vuetifyjs.com/en/style/colors
@require '~vuetify/src/stylus/settings/_colors'
$theme := {
  primary:     $blue.darken-2
  accent:      $blue.accent-2
  secondary:   $grey.lighten-1
  info:        $blue.lighten-1
  warning:     $amber.darken-2
  error:       $red.accent-4
  success:     $green.lighten-2
}

// Import Vuetify styling
@require '~vuetify/src/stylus/main'

.page
  @extend .fade-transition

问题是，更改这些主题颜色不会导致任何更改。

有什么办法解决这个问题吗？

Answer 1

文档未告知如何正确更改颜色...

首先，您需要设置当前主题，然后对其进行配置。我已经花了4个小时来解决这个问题。您需要相应地更改配置：

vuetify: {
        theme: {
            light: true,  //you don't actually need this line as it's for default
            themes: {
                light: {
                    primary: '#b71c1c',
                    ...
                }
            }
        }
    },

在解决此问题时，我发现您还可以像这样自由添加颜色：

vuetify: {
        theme: {
            themes: {
                light: {
                    'custom-color-one': '#b71c1c',
                    'custom-color-two': '#3B8070',
                    ...
                }
            }
        }
    },

，然后在您的HTML中：

<div class='custon-color-one'>
  I'am div with custom background color!
</div>

<div class='custon-color-one--text'>
  I'am div with custom text color!
</div>

Answer 2

解决方案很简单。

两个文件对此进行控制- nuxt.config.js 和 node_modules/vuetify/es5/colors.js 。

您需要打开 nuxt.config.js ，然后转到vuetify属性。通过themes部分下的vuetify: {...}属性，您可以将类名称映射到已配置的颜色变量。

此外，要更改颜色变量的值，请修改文件 node_modules / vuetify / es5 / colors.js 。在这里，您可以根据所需的十六进制颜色代码定义所需的任何颜色。

Answer 3

不确定，但是也许可以尝试，这取决于包含vuetify的方式，但是我想如果您使用了vuetify nuxt模板，则需要将其包含在nuxt.config.js文件中。
如果您像这样包含vuetify：

modules: [
 '@nuxtjs/vuetify'

然后添加主题，如下所示：

module.exports = {
  modules: [
    '@nuxtjs/vuetify'
    // ...
  ]
  // Add the following:  
  vuetify: {
    theme: {
      secondary: '#ff0000'
      // ...
    }
  },

Nuxt + Vuetify。如何应用主题颜色

3 个答案: