在一些地方,vuetify 将文本颜色设置为其主题中定义的“原色”(例如,突出显示选定的下拉菜单)。用我公司的颜色,这看起来很难看。我怎样才能将其设置为不同的?
据我所知,这来自这些 css 规则:
.v-application.primary--text {
color: #0064a2 !important;
caret-color: #0064a2 !important;
}
当我更改它们时,我可以使文本颜色看起来更漂亮。不幸的是,它们是由 vuetify 生成并标记为 !important
,所以我似乎无法在浏览器检查器之外更改它们。
我可以向样式主题添加类似 'primary--text': 'color: #FF00FF'
的内容,但这会更改背景颜色,而不是文本颜色。
我可以将 vuetify 的主题专门用于文本,并手动设置其余元素的颜色,但这似乎不是它们的预期用途。我应该怎么做才能更改文本颜色?
最佳答案
您可以向应用程序添加一个类并像这样创建一个更具体的 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>
关于html - 如何更改 Vuetify 主要文本颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59570483/