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

问题描述

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

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

//导入并定义 Vuetify 颜色主题//https://vuetifyjs.com/en/style/colors@require '~vuetify/src/stylus/settings/_colors'$主题:= {主要:$blue.darken-2口音:$blue.accent-2次要:$grey.lighten-1信息:$blue.lighten-1警告:$amber.darken-2错误:$red.accent-4成功:$green.lighten-2}//导入 Vuetify 样式@require '~vuetify/src/stylus/main'.页@extend .fade-transition

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

任何想法如何解决这个问题?

解决方案

文档未说明如何正确更改颜色...

首先你需要设置你当前的主题，然后配置它.我已经浪费了 4 个小时来解决这个问题.您需要相应地更改配置:

vuetify: {主题: {light: true,//你实际上并不需要这条线，因为它是默认的主题:{光: {主要:'#b71c1c'，...}}}},

在解决这个问题时，我发现您也可以像这样自由添加颜色:

vuetify: {主题: {主题:{光: {'自定义颜色一':'#b71c1c'，'自定义颜色-二':'#3B8070'，...}}}},

然后在您的 HTML 中:

我是带有自定义背景颜色的 div！
我是带有自定义文本颜色的 div！

I am using a Nuxt.js + Vuetify.js project

Looking at the file assets/style/app.styl we have

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

The problem is, changing these theme colors does not result in any changes.

Any ideas how to solve this?

解决方案

Docs not telling how to change color properly...

first of all you need to set your current theme and then config it.I've waste 4 hours to figure this out. You need to change you config accordingly:

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

---

While working on this problem I figured out that you also can freely add your colors like this:

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

and then in your HTML:

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

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

这篇关于Nuxt + Vuetify.如何应用主题颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！