Vuejs2 在Vuetify中使用自定义专题并将颜色变量传递给组件

在我的

index.js

文件中，我手动用我公司的颜色覆盖Vuetify

主题

对象：

Vue.use(Vuetify, {
  theme: {
    primary: '#377ef9',
    secondary: '#1b3e70',
    accent: '#ff643d',
    error: '#ff643d'
    ...
  }

现在，我可以使用模板中的这些颜色，如下所示：

<my-text-field name="input text"
    label="text"
    value="text text text text..."
    type="text"
    color="primary">
</my-text-field>

我可以很容易地在“样式”部分中写入颜色的十六进制值，但我不想重复我自己的内容，我宁愿使用我的

主题
对象，这样我也可以更容易地在任何地方更改颜色，并避免会导致颜色定义错误的打字错误。
编辑（2018/10/11）
从版本开始，我们可以启用CSS变量

注意：据称它在IE中不起作用（Edge应该起作用），可能还有一些Safari版本

来自（请参见自定义属性）

启用customProperties还将为每个属性生成一个css变量
主题颜色，然后可以在组件的
街区

Vue.use(Vuetify, {
  options: {
    customProperties: true
  }
})

<style scoped>
  .something {
    color: var(--v-primary-base)
    background-color: var(--v-accent-lighten2)
  }
</style>

Vue.use（Vuetify{
选项：{
customProperties：true
}
})
.什么{
颜色：var（--v-主基）
背景色：var（--v-accent-2）
}

用于自定义值，例如

yourcustomvariablename:“#607D8B”


使用
--v-yourcustomvariablename-base
（因此
base
是默认值）



原始答复：
github上有一个
功能请求
：访问手写笔文件中的主题颜色

@KaelWD（开发人员之一）：

这是你必须自己实现的事情。我试过了
以前也有类似的东西，但在框架上不起作用
水平

问题标记为
wontfix


编辑（2018/10/11）

另请参阅此更新的线程：

（功能请求：本机css变量）
有一种方法可以通过利用
：style
属性来解决这个问题。它可以用来反应性地设置自定义CSS属性

添加计算属性：

computed: {
    cssProps () {
        return {
            '--secondary-color': this.$vuetify.theme.secondary
        }
    }

将样式绑定到cssProps：

<div id="app" :style="cssProps">



然后，以你的风格：

<style scoped>
    label
        color: var(--secondary-color);
</style>


标签
颜色：var（--第二颜色）；

改编自本讨论：
对于从Vuetify V2开始遇到此问题的任何人，您可以执行以下操作以访问SCSS颜色变量

// Import the Vuetify styles somewhere global
@import '~vuetify/src/styles/styles.sass';

// Now in your components you can access the colour variables using map-get
div {
  background: map-get($grey, lighten-4);
}

所有颜色都可以在中找到。
切换主题的示例（）：



JS:

计算：{
setTheme（）{
this.$vuetify.theme.dark=this.goDark；
}
},
数据（）{
返回{
戈达克：错
}
}
根据以上答案，如果您想包含所有vuetify颜色，请将此代码放入App.vue模板中

<v-app :style="cssProps">

假设您在vuetify.js中有这种颜色

export default new Vuetify({
  treeShake: true,
    theme: {
      themes: {
        light: {
          darkRed: "#CD3300",
        }
      }
    }
})

然后，在任何组件中：

<style scoped>
  .label {
    color: var(--v-darkRed);
  }
</style>


.标签{
颜色：var（--v-darkRed）；
}
也许我迟到了，最有效的方法就是按照文档中提到的那样

我将提供一个同样的工作示例。
您只需进行三次更改即可使其正常工作

提到的选项，其中做魔术和你的主题颜色
在标记中提及要应用主题的类名
雅什·奥斯瓦尔

CSS来应用你的主题

.蓝色标题{
颜色：var（--v-主基）；
}
不确定，但我相信您也需要在
.styl
（即
main.styl
）中定义它们。或者在例如
自定义颜色.styl
中，然后将其导入组件内部
@Traxo我不想定义两次我的样式。维护将变得越来越困难。寻找一个完美的解决方案，我可以在一个地方定义我的东西，并在整个系统中使用它…我理解，这就是为什么我要发表评论，因为我不100%确定有vuetify解决方案。我相信vuetify唯一的方法是将这些值复制到
.styl
中的重要编辑。我也遇到了同样的问题，最后使用了这个。我的组件中的$vuetify.theme.currentTheme.accent是的，如果您只需要静态颜色，您可以在json文件中定义它们，并将其导入sylus和js。但是，要动态地更改它们，我们需要使用css变量，我对实现这些变量有点担心，因为我们仍然需要支持IE11。不确定vuetify的v1.2是否会使用自定义主题<代码>--v-yourcustomvariablename

不会work@RomOne你能试试

--v-yourcustomvariablename-base

？嘿，谢谢@Traxo！确实有效，但不适用于rgba颜色：/无论如何，谢谢@RomOne您也可以传递RGB tho的整数表示形式（例如，

yourcustomvariablename:0xff0000

），不确定为什么您需要tho值中的不透明度，因为您无法修改它。只需设置您需要的颜色即可。我无法实现此功能。

var（--次色）

未被解析。可能构建未正确设置？您是否检查了链接讨论中的代码笔？我最初在测试时忘记添加：style=“cssProps”属性。对于lodash粉丝，这里有一个导出cssProps（）中整个主题的单行程序：

（this.$vuetify.theme）。reduce（（acc，v，k）=>{acc[`-${k}]=v；return acc；}，{}；

我不明白这一点。样式块中的

标签

如何应用于HTML/JS？请参阅中的重要编辑。不再需要解决方法（如果您不喜欢较旧的浏览器）.谢谢你的提示，但我认为我们的想法是不要直接使用名称访问颜色，而是使用主题设置的背景颜色。至少这是我读到的，也是我正在寻找的；-）是的，知道如何访问主题颜色吗？谢谢，正是我所寻找的，不是主题，而是现实colors@CJxD不幸的是，我不知道我害怕，但我认为它们可以作为变量

background color:$color primary

似乎

var（-v-primary-base）

实际上也适用于SASS/SCSS，因为它是一个本机CSS变量。您还可以执行

var（-v-primary-4）之类的操作<
export default new Vuetify({
  treeShake: true,
    theme: {
      themes: {
        light: {
          darkRed: "#CD3300",
        }
      }
    }
})

<style scoped>
  .label {
    color: var(--v-darkRed);
  }
</style>

export default new Vuetify({
    theme: {
        options: {
            customProperties: true
        },
        themes: {
            light: {
                primary: "#3DCFD3",
                secondary: "#171b34",
                accent: "3D87E4"
            }
        }
    }
});

<h4 class="blue-header">Yash Oswal</h4>  

<style lang="scss">

.blue-header {
  color: var(--v-primary-base);
}

</style>