将主题颜色暴露给 vuetify 中的 css 变量不起作用

Posted 2023-02-22

【中文标题】将主题颜色暴露给 vuetify 中的 css 变量不起作用

【英文标题】：Expose theme colors to css variables in vuetify not working

【发布时间】：2020-04-19 02:20:23

【问题描述】：

我启用了自定义属性：

Vue.use(Vuetify, 
    options: 
        customProperties: true
    
);

并尝试通过 CSS 变量使用：

<style>
    .custom
        color:var(--v-primary-base);
    
</style>

这是我设置主题的vuetify.js 文件：

export default new Vuetify(
    icons: 
        iconfont: 'mdi',
    ,
    theme: 
        themes: 
            light: 
                background: '#FFFFFF',
                primary: '#25316A',
                secondary: '#b0bec5',
                accent: '#25316A',
                error: '#E86674',
                orange: '#FF7A0D',
                golden: '#A68C59',
                badge: '#F5528C',
                customPrimary: '#085294',
            ,
            dark: 
                primary: '#085294',
            
        ,
    ,
)

没有一个主题颜色可以通过变量访问。我尝试了很多方法，但没有奏效，也没有抛出错误。有谁能帮帮我吗？

【问题讨论】：

这能回答你的问题吗？ ***.com/questions/48280990/…

@AnnKilzer 不，没有用。

【参考方案1】：

您需要将options 属性传递给Vuetify 实例，而不是在use 函数中不。

来自docs：

export default new Vuetify(
  theme: 
    options: 
      customProperties: true,
    ,
    // ...
  ,
)

【讨论】：

Vuetify 的变量此时停止工作，这是为什么呢？例如，您不能使用 variables.scss 并定义 $stepper-header-height: 或其他东西..（没有 customProperties，这可行）

【参考方案2】：

你必须使用 vuetify 文件中的选项，但是你在错误的地方使用了它......

export default new Vuetify(
icons: 
    iconfont: 'mdi',
,
theme: 
    themes: 
        options: 
            customProperties: true,
        ,
        light: 
            background: '#FFFFFF',
            primary: '#25316A',
            secondary: '#b0bec5',
            accent: '#25316A',
            error: '#E86674',
            orange: '#FF7A0D',
            golden: '#A68C59',
            badge: '#F5528C',
            customPrimary: '#085294',
        ,
        dark: 
            primary: '#085294',
        
,
,
)

之后，当您想使用自定义 CSS 变量时，您必须像这样使用它..

<style>
    .custom
        color:var(--v-golden-base);
    
</style>

这里的 base 是一个默认值，我展示了黄金变量，但你可以使用它们中的任何一个。

【讨论】：

你知道为什么 color: var(--v-info-lighten2) 有效吗？但是 var(--v-red-lighten2) 没有？

你有答案了吗？

天哪，我不记得了，不再使用 vue。我想你们俩都是对的，我把它放错地方了..

这不起作用。 customProperties 必须设置为 theme 而不是 themes

它在我的项目中工作，我的项目现在已经启动并运行了！我不知道为什么不适合你！