在 Vuetify 中使用自定义主题并将颜色变量传递给组件 [英] Using custom theming in Vuetify and pass color variables to components

问题描述

在我的 index.js 文件中，我用我公司的颜色手动覆盖了 Vuetify theme 对象:

Vue.use(Vuetify, {主题: {主要:'#377ef9'，次要:'#1b3e70'，口音:'#ff643d'，错误:'#ff643d'...}

现在，我可以像这样使用模板中的这些颜色:

<my-text-field name="输入文本"标签=文本"值="文本文本文本文本..."类型=文本"颜色=主要"></my-text-field>

我所追求的是使用 primary 或上面定义的 theme 对象中的任何其他变量，在我的模板样式中:

<style scoped lang="stylus">标签颜色:<次要颜色><-- 这就是我所追求的颜色:#1b3e70 <-- 这有效，但对我来说还不够好</风格>

我可以轻松地在样式部分中编写颜色的十六进制值，但我不想重复自己，宁愿使用我的 theme 对象，这样也更容易我可以轻松地更改各处的颜色，避免打字错误导致颜色定义错误.

解决方案

编辑^(2018/10/11)

自版本 1.2. 我们可以启用 CSS 变量
注意:据称它不能在 IE 中运行(Edge 应该可以运行)，可能还有一些 Safari 版本?

来自文档(请参阅自定义属性)<块引用>

启用 customProperties 也会为每个属性生成一个 css 变量主题颜色，然后您可以在组件中使用它块.

Vue.use(Vuetify, {选项: {自定义属性:true}})<样式范围>.某物 {颜色:var(--v-primary-base)背景颜色:var(--v-accent-lighten2)}</风格>

对于自定义值，例如
您的自定义变量名称:'#607D8B'
使用 --v-yourcustomvariablename-base (所以 base 是默认值).

<小时>

---

原答案:

github 上有一个Feature Request:访问触控笔文件中的主题颜色

@KaelWD(开发人员之一)写道:

<块引用>

这是你必须自己实现的东西.我试过做以前类似的东西，但它在框架上并不真正起作用水平.

问题被标记为wontfix

<小时>_{编辑 (2018/10/11)}
另请参阅此更新的线程:
https://github.com/vuetifyjs/vuetify/issues/827(功能请求:原生 css 变量)

In my index.js file I have manually override the Vuetify theme object with my company's color:

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

Now, I can use these colors from my templates like so:

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

What I'm after is using the primary or any other variable in the theme object defined above, inside my template style:

<script>
  import { VTextField } from 'vuetify'
  export default {
    extends: VTextField
  }
</script>

<style scoped lang="stylus">
  label
    color: <seconday color> <-- this is what I'm after
    color: #1b3e70 <-- this works, but not quite good enough for me
</style>

I can easily just write the hex value of my colors in the style section, but I don't want to repeat myself, and would rather use my theme object so it will also be easier for my to easily change the colors everywhere, and avoid typos which will lead to mistakes in the colors definitions.

解决方案

Edit ^(2018/10/11)

Since version 1.2. we can enable CSS variables
NOTE: allegedly it won't work in IE (Edge should work), and possibly some Safari versions?

From docs (see Custom Properties)

Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components' blocks.

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

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

For custom values e.g.
yourcustomvariablename: '#607D8B'
use --v-yourcustomvariablename-base (so base is default).

---

---

Original answer:

There is a Feature Request on github: Access theme colors in stylus files

@KaelWD (one of devs) wrote:

This is something you'll have to implement yourself. I've tried doing something similar before but it doesn't really work on a framework level.

Issue is labeled wontfix

---

_{Edit (2018/10/11)}
Also see this updated thread:
https://github.com/vuetifyjs/vuetify/issues/827 (Feature request: Native css variables)

这篇关于在 Vuetify 中使用自定义主题并将颜色变量传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！