如何解决在Nuxt颜色模式下使用SCSS变量
我正在尝试将Nuxt颜色模式与现有的SCSS样式表一起使用。到目前为止,我已经为整个应用程序中的所有颜色使用了$ primary和$ secondary之类的变量。我想使用nuxt颜色模式更改主题。 here示例显示了一组CSS变量,这些变量根据html元素的类而变化,例如(.dark模式,.light模式)
如何在SCSS中应用此逻辑(更改颜色变量,具体取决于html元素的类)?
我尝试过:
.light-mode {
$primary: #196b69;
$accent: #e69496;
...
}
.dark-mode {
$primary: red;
$accent: blue;
...
}
还有一点:
$themes: (
light-mode: (
primary: #196b69,accent: #e69496,...
),dark-mode: (
primary: red,accent: blue,...
)
);
但是它没有用。 在此先感谢您的帮助或对有用文档的引用! :)
解决方法
.light-mode {
--primary: #196b69;
--accent: #e69496;
...
}
.dark-mode {
--primary: red;
--accent: blue;
...
}
$primary: var(--primary);
$accent: var(--accent);
有效,除了我在transparentize($color,$opacity)
实施的任何地方。我的解决方法是改为使用opacity
作为单独的规则。
代表OP添加了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。