如何在样式中使用 vuetify 主题变量

Posted 2023-02-19

【中文标题】如何在样式中使用 vuetify 主题变量

【英文标题】：How to use vuetify theme variables in styles

【发布时间】：2019-03-15 06:01:32

【问题描述】：

我想在我的 vue 文件的样式部分中使用我的 vuetify 主题中定义的变量。它没有在文档中提及，似乎无法在任何地方找到答案，有人知道该怎么做吗？

例如

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

现在在我想要做的 Home 组件中：

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

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

【问题讨论】：

Using custom theming in Vuetify and pass color variables to components的可能重复

另一个问题的答案比官方解决方案更多，这正是我想要的。虽然如果没有，那么我想必须解决这个问题。

> The answers on the other question are more work arounds than official solutions, 其中一个答案引用了有关此问题的官方声明。对此答案的回复是由 Vuetify 开发人员之一。所以它并不能否定这是一个重复的问题（至少我没有看到任何区别？）。 IE。 afaics 官方的“解决方案”是一种“解决方法”，哈哈。

官方回答是指手写笔，而不是 scss - 虽然不知道是否同样适用

我已经更新了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;

【讨论】：

查看***.com/a/48285278/1084004了解完整详情，customProperties: true可能需要设置