angular 实现皮肤主题切换的解决方案
分配了个给现有angular6项目实现主题切换的效果，实现light dark明暗两种显示效果，我使用scss css预处理器方便开发。
效果（因为项目需要保密，只截了一点点）：
切换样式 就是 实现css 的 变化，主要思路是通过在body 上控制自定义属性的值实现样式的控制，在body上 添加 data-theme-style="dark", 像这样：
<body data-theme-style="dark">
<app-root></app-root>
</body>
我们通过data-theme-style的值 来控制样式，本项目中 值有 light,dark 分别代表明暗两套主题
首先把切换主题 需要变化的 样式 抽离出来 定义成mixin，如：背景颜色，字体颜色，阴影，边框等，，
这里以背景颜色 和 字体颜色举例：
@mixin mixin-bg-color($dark-color,$light-color){
[data-theme-style="dark"] & {
background-color: $dark-color;
}
[data-theme-style="light"] & {
background-color: $light-color;
}
}
@mixin mixin-font-color($dark-color,$light-color){
[data-theme-style="dark"] & {
color: $dark-color;
}
[data-theme-style="light"] & {
color: $light-color;
}
}
在需要使用相关样式的选择器里应用mixin：
@include mixin-font-color(blue,red)
举个使用的例子，在data-theme-style=dark时 让 .title 类的字体颜色变为蓝色 在data-theme-style=light时 让 .title 类的字体颜色变为红色：
@mixin mixin-font-color($dark-color,$light-color){
[data-theme-style="dark"] & {
color: $dark-color;
}
[data-theme-style="light"] & {
color: $light-color;
}
}
.main{
.title{
@include mixin-font-color(blue,red)
}
}
上方的scss 编译成css后的结果：
[data-theme-style="dark"] .main .title {
color: blue; }
[data-theme-style="light"] .main .title {
color: red; }
这样一看 就很明白了。
接下来就是实现切换到效果，我这里是点击一个按钮 实现 dark 和light 的来回切换，
在html模板上：
ts 代码如下，注释很清楚了：
/**
* 使用localStorage 存储主题的名称
* @param theme
*/
saveTheme(theme): void {
localStorage.setItem(`theme`, theme);
}
/**
* 获取主题名称并设置到body
*/
getTheme(): void {
let theme = localStorage.getItem(`theme`); // 获取主题名称
if (!theme) {
theme = `dark`; // 本地存储中没有theme的话 使用dark主题
}
const body = document.getElementsByTagName('body')[0];
body.setAttribute('data-theme-style', theme); // 设置data-theme-style 属性
this.theme = theme; // 用于界面显示
}
/**
* 点击按钮 触发改变主题的方法
*/
changeTheme(): void {
const body = document.getElementsByTagName('body')[0];
if (body.getAttribute(`data-theme-style`) === 'dark') {
this.saveTheme(`light`); // 保存
this.getTheme(); // 更新获取
} else {
this.saveTheme(`dark`); // 保存
this.getTheme(); // 更新获取
}
}
在组件的 ngOnInit() 生命周期 调用下 this.getTheme() 初始化。。
做完这些 已经可以实现主题的切换了 ，但是 上方的 样式 写在公共的样式表里才有效，因为组件的样式只对对应的组件生效，使用[data-theme-style="dark"]属性选择器无法匹配到对应的元素，该属性是定义在body上的，组件上肯定是没有的。 如何在组件的样式里生效呢，这个问题困扰了我一阵子，还是在官网文档找到答案：
:host-context 选择器
有时候，基于某些来自组件视图外部的条件应用样式是很有用的。 例如，在文档的
这时可以使用 :host-context() 伪类选择器。它也以类似 :host() 形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类， 直到文档的根节点为止。在与其它选择器组合使用时，它非常有用。
参考：https://www.angular.cn/guide/component-styles
根据文档的说明，我们把前面的mixin改一下：
@mixin mixin-font-color($dark-color,$light-color){
:host-context([data-theme-style="dark"]) & {
color: $dark-color;
}
:host-context([data-theme-style="light"]) & {
color: $light-color;
}
}
.main{
.title{
@include mixin-font-color(blue,red)
}
}
生成 的css 是这样的：
:host-context([data-theme-style="dark"]) .main .title {
color: blue; }
:host-context([data-theme-style="light"]) .main .title {
color: red; }
至此 大功告成
版权声明：
作者：东明兄
链接：https://blog.crazyming.com/technology-sharing/705/
来源：CrazyMing
文章版权归作者所有，未经允许请勿转载。
东明兄
匿名