vue.js - 如何在样式中使用 vuetify 主题变量

Question

我想在我的 vue 文件的样式部分使用我的 vuetify 主题中定义的变量。它没有在文档中提到并且似乎无法在任何地方找到答案，有谁知道如何做到这一点？

例如

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
  }
})

现在在我的 Home 组件中我想做:

<template>
    <h1>My Title</h1>
</template>

<styles>
    h1{
        color:$primary; #from the vuetify theme
    }  
</styles>

Answer 1

你可以使用:

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

从这个列表:

  --v-anchor-base: #c42742;
  --v-primary-base: #c42742;
  --v-primary-lighten5: #2c0447;
  --v-primary-lighten4: #cfa854;
  --v-primary-lighten3: #dd88cc;
  --v-primary-lighten2: #b49921;
  --v-primary-lighten1: #f899c7;
  --v-primary-darken1: #0169dc;
  --v-primary-darken2: #c28fd0;
  --v-primary-darken3: #fbe002;
  --v-primary-darken4: #33303a;