vue+webview+less 实现夜间模式换肤功能

第一步

建立less文件

第二步：

在less中加入代码

第三部：解析代码

1、动态添加.test-dark 类名，触发styleChange（）函数

这里我把类名写死，方便测试

2、举例

如果我想要改变头部   .Header-noOpen  背景色

那么注意要在styleChange中改变

 

个人记录总结，勿喷哈哈哈哈哈

---

（上次有小伙伴私信说有部分代码貌似缺失，真是抱歉，这次我补上自己所有的实际运用）

（1）首先新建less文件夹，定义一些公共的颜色变量（sass也是一样的道理，只是写法方式有些出入，思路差不多）

注意：这里需要跟UI沟通在浅色模式中的颜色变化到深夜模式的颜色需要统一；例如，所以的#fff在深色模式都变为#000，这样统一公共变量才发挥到好处，部分页面微调颜色也是可以的

（2）需要定义一个公共的方法来切换不同的环境，这里我定义了一个styleChange（）

此后在所以的颜色使用中直接使用@bgColor、@bgColor2、@bgColor3....等变量即可

列：某个页面使用需要使用的颜色需要定义一下变量

（3）此处我定义了两个不同模式下的两个变量，到时候全局在body添加.night-mode-style 或.mode-style类名来切换不同的模式（不知道这个方法是不是笨了点）

使用 @@style 双@的方法取值

（4）使用vue的 Mixins 定义公共方法styleModeChange()暴露给window，app端通过切换styleModeChange()传入不同的参数来切换不同的环境模式，（mixins方便快捷，你也可以在每个页面单独引入，如果是单页面也可以全局引入；因为该项目是单独webview页面，项目打包出来的是多个独立的html页面，所以只能在每个页面中都注入一个方法来改变不同的模式，你需要了解vue  mixins的使用方法）

（5）app端可以主动切换模式，同时webview也需要监听同步app的模式，与客户端沟通好通过UA变量来监听变化

模拟app切换模式

深色模式

浅色模式