假设我在一个 Angular 应用程序中有两个主题(浅色和深色)> 2,以及一个已配置为将主题类添加到 body 标签的切换按钮
Let's say I have two themes (light & dark) in an angular app > 2, and a toggle button which is already configured to add the theme class to the body tag
变量.scss
$themes: ( light: ( backgroundColor: #fff, textColor: #408bbd, borderColor: #254fe5, ), dark: ( backgroundColor: #222, textColor: #ddd, borderColor: #2e4dd2, ), );我尝试了我发现的不同方法(这里和这里),但没有工作.
I tried different approaches I found (here and here), but none worked.
我也尝试过最简单的方法
I also tried the simplest approach
aboutponent.scss
aboutponent.scss
.theme-dark .page-title{ color: white; } .theme-light .page-title{ color: red; }我知道 body 标签上的 .theme-dark 类无法从组件样式中识别出来,但我找不到任何解决方案.
I know the class .theme-dark on body tag is not recognized from a component style, but I can't find any solution.
我可以使用什么方法在这样的模块系统中获得多个主题?
What approach can I use to get multiple themes in such modules system?
推荐答案CSS 为我们提供了一个名为 var() 的功能,它允许我们在运行时更改 CSS 元素的属性.有关更多详细信息,您可以在此此处查看我的博客
CSS has provided us a feature called var(), which allows us to runtime change properties of our CSS elements. For more details, you can check my blog on this here
更多推荐
sass 多个主题的角度
发布评论