相关疑难解决方法(0)

在我的index.js文件中,我theme用我公司的颜色手动覆盖了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>

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

<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对象,这样我也可以更容易地在各处轻松更改颜色,并避免拼写错误这会导致颜色定义出错.