ionic-实现一键换肤功能方案

一、ionic-实现一键换肤

1. 应用场景

• 客户说：能不能提供多个主题颜色，现在的以后看腻了。
• 客户说：可不可以做个夜间模式，一键切换的那种。

2. 思路

定义全局样式，准备多份全局样式，来回切换即可。

3. 具体实现

• 在theme目录下新建多份样式，注意文件中的所有样式一定要放在一个主题样式中，也就是用一个总的class样式包裹下。
  
• 在全局样式中引用，注意这边只是引用，并不是真正的生效，但是如果没有class样式包裹的话，是直接生效的。
  
• 新建一个settingsProvider工具类，获取主题和设置主题
  主要做三件事
  • 初始化主题，也就是默认主题设置，直接在构造方法中初始化。这边我加了个缓存，如果缓存中，起一个记录的作用，不能我设置的橘红色，下次打开的时候，就是初始化蓝色，肯定不合适。
    
  • 设置主题颜色和获取主题颜色
    
    注意：这边应用到了BehaviorSubject，它是用来呈现当前的值，会记住最新一次发送的元素，并把该元素当作目前的值。
• 加载主题样式，在app.component.ts中注入我们新建的provider，并且将订阅到值赋值给一个定义变量。
  
• 在app.html中通过class属性设置主题
  
• 目前我们完成了，设置主题，那怎么切换呢？
  • 构建一个设置页面
  • 使用ionic提供的ActionSheetController，页面点击事件触发provider里的设置主题方法即可。
  • 效果如下