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

Question

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

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

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

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

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

Here's a codepen example

我可以将 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>