sass 角度的多个主题答案

【问题标题】：sass multiple themes in angularsass 角度的多个主题
【发布时间】：2017-08-19 12:27:32
【问题描述】：

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

变量.scss

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

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

我也尝试了最简单的方法

关于.component.scss

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

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

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

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

【问题讨论】：

如果你想在运行时更改主题，应用带有条件的根类，我使用的方法是使用 webpack 抛出一个变量并以角度检索它，然后应用关于主题名称的 sass 文件
@BabarBilal 我用条件应用了根类，但是我没有得到如何应用 sass 文件，我正在寻找一种从组件样式应用的方法

标签： angular sass themes angular4

【解决方案1】：

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

关于.component.scss

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

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

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

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

【讨论】：

【解决方案2】：

CSS 为我们提供了一个名为 var() 的功能，它允许我们在运行时更改 CSS 元素的属性。更多详情可以查看我的博客here

【讨论】：