使用 Vuetify 主题时如何分配文本颜色

Posted 2023-02-23

【中文标题】使用 Vuetify 主题时如何分配文本颜色

【英文标题】：How to assign text colors when working with Vuetify themes

【发布时间】：2020-01-12 04:34:58

【问题描述】：

我对 Vuetify 还很陌生，并且很难弄清楚主题、组件和文本颜色是如何协同工作的（如果它们确实如此的话）。

我想在我的模板中使用主题颜色名称，例如 primary, secondary, warning, error，并通过添加新主题或覆盖现有主题为这些关键字分配颜色。

这一切都是开箱即用的，但问题是我不知道如何以同样的方式设置文本颜色。我想分配一个primary-text-color、secondary-text-color等，并让它默认自动使用正确的文本颜色。

当我更改按钮的颜色时，文本颜色似乎会自动更改，但其他地方没有。

如果我为按钮添加主题颜色，Vuetify 会自动将文本颜色更改为可读，例如（仅使用默认主题）：

<v-btn color='primary'>Test</v-btn>

文本将变为primary，按钮将完全可用 而较浅的颜色会有dark text:

<v-btn>Test</v-btn>

但其他组件的行为不同。例如，带有default color 的v-app-bar 组件在浅色背景上具有深色文本，但primary app bar 将深色文本保持在蓝色背景上。

看起来我需要使用辅助类或类似方法显式更改文本颜色，即使这样我也必须使用 white--text 而不是 primary--text （它只是将实际的原色应用于文本)。

我想我已经阅读了网站上的所有文档，但我找不到任何关于这个特定问题的参考

对于图片的链接，我很抱歉，我没有足够的天赋将它们嵌入到我的帖子中。

【问题讨论】：

我也想知道。

@TorHaugen 我很确定目前没有办法做到这一点。明确使用 white--text 之类的东西是唯一的方法，尽管它很愚蠢。我最终只是在需要的地方使用了那个加上dark。有主题但无法将文本颜色链接到主题感觉就像一个很大的差距。

【参考方案1】：

目前，这主要适用于文本

<v-list-item-title v-if="company_name" class="title primary--text">
             company_name.company_name 
          </v-list-item-title>