我有一个Quasar CLI的Quasar应用程序，我想创建自己的颜色，当我使用亮/暗主题时区分。在我之前的项目中，我使用Vuetify，只需编辑我的vuetify.js文件，并添加相同名称的颜色到我的亮和暗对象中，就可以轻松地做到这一点。
在Quasar中，这似乎并不容易。截至目前，我有一个quasar.variables.scss文件，在那里我可以通过使用.body--dark {}和.body--light{}类为明暗模式指定不同的颜色。不幸的是，我只能覆盖标准颜色，如原色，次要色，强调色等。我不能在这里添加新颜色。
我目前拥有的：
.body--dark {
--q-primary: #exampleColor;
--q-secondary: #exampleColor;
--q-accent: #exampleColor;
--q-positive: #exampleColor;
--q-negative: #exampleColor;
--q-info: #exampleColor;
--q-warning: #exampleColor;
--q-dark-page : #exampleColor;
}
.body--light {
--q-primary: #exampleColor;
--q-secondary: #exampleColor;
--q-accent: #exampleColor;
--q-positive: #exampleColor;
--q-negative: #exampleColor;
--q-info: #exampleColor;
--q-warning: #exampleColor;
}我基本上想要的是给两个类都添加一种新的颜色，有没有人在这里有经验或者可以让我走上正确的方向？
1条答案
按热度按时间tzdcorbm1#
所以我找到了部分解决方案。
您可以向这两个类添加自定义颜色，只需添加
然后你可以在你的css中的vue组件中使用它们，像这样：
使用--q-是强制性的，否则它将无法工作。同样，在quasar组件提供的属性中使用变量仍然无法工作。因此
<q-btn color="--q-yourCustomColor">Button</q-btn>似乎仍然无法识别。解决方法是为按钮提供一个id或class，并像我在示例中提供的那样为其提供背景颜色。