angular 实现皮肤主题切换的解决方案

CrazyMing 2019-01-03
1条评论 982 次浏览
CrazyMing 2019-01-031条评论 982 次浏览

分配了个给现有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 选择器
有时候,基于某些来自组件视图外部的条件应用样式是很有用的。 例如,在文档的 元素上可能有一个用于表示样式主题 (theme) 的 CSS 类,你应当基于它来决定组件的样式。

这时可以使用 :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; }

至此 大功告成

2+

angular 实现皮肤主题切换的解决方案” 有1条评论

发表评论

电子邮件地址不会被公开。

隐藏
变装