1

假设我在 Angular 应用程序 > 2 中有两个主题（浅色和深色），以及一个已配置为将主题类添加到body标签的切换按钮

变量.scss

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

我尝试了我发现的不同方法（这里和这里），但没有一个奏效。

我也尝试了最简单的方法

about.component.scss

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

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

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

我可以使用什么方法在此类模块系统中获取多个主题？

4

2 回答 2

0

您可以: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 文件。

于 2019-07-04T20:50:31.223 回答
0

CSS 为我们提供了一个名为 var() 的功能，它允许我们在运行时更改 CSS 元素的属性。有关更多详细信息，您可以在此处查看我的博客

于 2020-05-09T09:27:45.787 回答