在我的 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
对象,这样也更容易我可以轻松地更改所有地方的颜色,并避免会导致颜色定义错误的拼写错误。
最佳答案
编辑(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 上有一个Feature Request
:Access theme colors in stylus files
@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.
问题被标记为 wontfix
编辑 (2018/10/11)
另请参阅此更新的线程:
https://github.com/vuetifyjs/vuetify/issues/827 (功能请求: native css 变量)
关于vuejs2 - 在 Vuetify 中使用自定义主题并将颜色变量传递给组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56819297/