我们正在使用一个类html- 判断用户是否在的元素dark or light应用程序的模式。
<html class="dark-mode"></html>
这个类是使用添加的Renderer2在检测用户所选设置的服务中。到目前为止效果很好。
现在，我们必须调整所有组件，以便在黑暗模式下也能看起来很好。但问题是 Angular 的ViewEncapsulation.
我们认为会派上用场的是简单地更新组件的 SCSS：
.headline {
color: black;
.dark-mode & {
color: white;
}
}
或者在纯 CSS 中：
.headline {
color: black;
}
.dark-mode .headline {
color: white;
}
现在这不起作用，因为类.dark-mode正如预期的那样，似乎已被封装。
我们该如何解决这个问题呢？
:host-context提供对上面的 css 类的访问:host。通过使用:host-context您可以检查主机的任何父级是否具有特定的 css 类并应用样式：
:host-context(.dark-mode) h2 {
color: white;
}
文档：https://angular.io/guide/component-styles#host-context https://angular.io/guide/component-styles#host-context
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
