vue+css实现夜间模式

最近项目中要求实现夜间模式,整理一下实现方法。

ps. 我们的项目是混合开发,所以夜间模式要通过原生交互实现,如果直接是h5项目,则可省去原生交互这块。

step1 原生交互方法

step2  获取模式方法

step3 实现方法

1、使用css大类区分

2、针对不同class类定义css属性全局变量

3、全局引入样式文件(main.js中引入)

4、页面中可定义css私有变量(包含页面中特殊的颜色属性,不止涉及亮度更改的图片)

        变量定义规范:--(页面名称)-自定义

        建议将白天与夜间模式图片区分两个文件夹存储

5、变量使用规范

总结:

1、注意css变量的使用的兼容性,例如安卓5的手机可能识别不了变量,解决方法:postcss可以试试看

2、如果项目中已使用less,可直接用less来实现,现未发现其兼容性问题(下一篇文章我会写less实现夜间模式)

你可能感兴趣的:(vue+css实现夜间模式)