如何更改 Vuetify 的主要文本颜色？

Question

在一些地方，vuetify 将文本颜色设置为其主题中定义的“主要颜色”（例如，突出显示选定的下拉菜单）。用我公司的颜色，这看起来很难看。我怎样才能将其设置为不同？

据我所知，这来自这些 css 规则：

.v-application.primary--text {
    color: #0064a2 !important;
    caret-color: #0064a2 !important;
}

当我更改这些时，我可以使文本颜色看起来不错。不幸的是，它们由 vuetify 生成并标记为!important，因此我似乎无法在浏览器检查器之外更改它们。

我可以'primary--text': 'color: #FF00FF'向样式主题添加类似的内容，但这会更改背景颜色，而不是文本颜色。

这是一个codepen示例

我可以专门为文本使用 vuetify 的主题，并手动设置其余的元素颜色，但这似乎不是它们的预期用途。我该怎么做才能更改文本颜色？

Answer 1

您可以向应用程序添加一个类并创建一个更具体的 CSS 规则，如下所示（此示例实际上并未在此处运行，但您可以将其复制到您的 codepen）：

new Vue({
  el: '#app',
  vuetify: new Vuetify({
    theme: {
      dark: true,
      themes: {
        dark: {

          // Color is applied to selected drop down item
          primary: '#0064A2',
          
          // Uncomment this to make things worse
          // 'primary--text': '#FF00FF'
        }
      }
    }
  }),
})

.my-app.v-application .primary--text {
    color: white !important;
}

<div id="app">
  <v-app class="my-app">
    <!--Click the dropdown to see ugly colors-->
    <v-select :items="[undefined]"/>
  </v-app>
</div>