sass 多个主题的角度

本文介绍了sass 多个主题的角度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

假设我在一个 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