我使用的是带有Nuxt的Vue 2。我如何才能实现Vuetify把所有地方，其中的颜色是使用CSS变量使用var(--X)？
我想动态更改Vue主题的颜色。
{
theme: {
themes: {
light: {
primary: 'var(--primaryColor)', // <== Put CSS Variables in here
secondary: 'var(--secondaryColor)'
},
},
},
}当我这样做的时候，所有的颜色都是白色的。
1条答案
按热度按时间ajsxfq5m1#
我猜你是在
nuxt.config.js中做这个配置的吧？到目前为止，那个文件还不知道任何类型的window或CSS。你需要从其他地方导入硬编码的CSS变量或者直接在那里写它们（因为它在顶点，完全没问题）。
#ffffallback可能是undefined或类似情况下的一个fallback。至于直接改变Vuetify的颜色，这里是关于自定义的一节，我引用
Vuetify将根据这些值生成css类，这些类可以在DOM中访问。这些类将遵循与其他helper类相同的标记，主要的或次要的--例如text。如果您提供了一个完整的颜色对象（如上面的colors.purple），则将直接使用变亮/变暗变量，而不是生成。
这些值也将在theme属性下的示例$vuetify对象上可用。这允许您动态修改您的主题。在后台，Vuetify将重新生成并更新您的主题类，无缝地更新您的应用程序。
因此，更新这些值可以像这样完成
PS：伟大的事情是，变亮/变暗的变体也将为你做。