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

Question

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

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>

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

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

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

Answer 1

编辑^(2018/10/11)

自版本 1.2.我们可以启用 CSS 变量
注意:据称它无法在 IE 中运行(Edge 应该可以运行)，也可能在某些 Safari 版本中运行？

来自docs (请参阅自定义属性)

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>

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

<小时/>

---

原始答案:

github 上有一个功能请求:访问手写笔文件中的主题颜色

@KaelWD(开发人员之一)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.

问题被标记为不会修复

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