角度中的多个主题

Question

假设我在角度应用程序中有两个主题（浅色和深色）＆gt; 2，以及一个已配置为将主题类添加到正文标记的切换按钮

variables.scss

$themes: (
  light: (
    backgroundColor: #fff,
    textColor: #408bbd,
    borderColor: #254fe5,
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd,
    borderColor: #2e4dd2,
  ),
);

我尝试了我发现的不同方法（here和here），但都没有效果。

我也尝试过最简单的方法

about.component.scss

.theme-dark .page-title{
  color: white;
}

.theme-light .page-title{
  color: red;
}

我知道body标签上的类.theme-dark无法从组件样式中识别，但我找不到任何解决方案。

我可以使用哪种方法在这样的模块系统中获取多个主题？

Answer 1

您可以在范围角度组件中使用:host-context。这是您的示例：

about.component.scss

:host-context(.theme-dark) .page-title{
  color: white;
}

:host-context(.theme-light) .page-title{
  color: red;
}

然后您需要一个实例，例如可以在顶层更改CSS类以切换主题的服务。

当您不需要支持IE11或其他旧版浏览器时，请查看CSS自定义属性（CSS变量）以在运行时更改值。这样可以减少您的CSS文件。

Answer 2

CSS为我们提供了一个名为var（）的功能，该功能使我们能够在运行时更改CSS元素的属性。 有关更多详细信息，您可以在此here

上查看我的博客。