一种前端页面配色处理方法、装置、设备及存储介质制造方法及图纸

本申请公开了一种前端页面配色处理方法、装置、设备及存储介质，通过获取到HTML根节点添加色彩body标签指令，然后根据body标签指令对custom函数进行深色主题和浅色主题的十六进制色值编译转换，最后通过PostCSS插件将深色主题写到HTML根节点，解决了目前通过CSS自定义属性方式实现配色的方法，造成了研发和设计之间较大沟通成本，以及前端工程师因为需要硬编码多份色值的大开发量所导致的人工耗费和效率低的技术问题。和效率低的技术问题。和效率低的技术问题。

【技术实现步骤摘要】
一种前端页面配色处理方法、装置、设备及存储介质


[0001]本申请涉及前端处理
，尤其涉及一种前端页面配色处理方法、装置、设备及存储介质。

技术介绍

[0002]层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
[0003]目前各大应用和网站都开始支持深色模式。相比于传统的页面配色方案，深色模式具有较好的降噪性，也能让用户的眼睛在看内容时更舒适。这时候，设计一个工程化主题切换功能，并梳理现代前端样式的解决方案显得尤为重要。通常的做法是每个颜色主题块编写样式表，切换的时候对应去切换。目前主流的方案往往通过CSS变量(CSS自定义属性)来实现，将主题有关的颜色，通过业务和语义化的方式命名。
[0004]然而，通过CSS自定义属性方式实现配色的方法，造成了研发和设计之间较大沟通成本，以及前端工程师因为需要硬编码多份色值的本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端页面配色处理方法，其特征在于，包括:S1、获取到HTML根节点添加色彩body标签指令；S2、根据所述body标签指令对custom函数进行深色主题和浅色主题的十六进制色值编译转换；S3、通过PostCSS插件将所述深色主题写到所述HTML根节点。2.根据权利要求1所述的前端页面配色处理方法，其特征在于，所述步骤S1具体包括：S11、获取到HTML根节点添加色彩body标签为白色、深色和黑色的指令。3.根据权利要求1所述的前端页面配色处理方法，其特征在于，所述步骤S2具体包括：S21、根据所述body标签指令通过WebPack配置自定义PostCSS插件对custom函数进行深色主题和浅色主题的十六进制色值编译转换。4.根据权利要求1所述的前端页面配色处理方法，其特征在于，所述步骤S3具体包括：S31、原地编译CSS中的颜色为浅色主题对应色值；S32、通过PostCSS插件按照html[data
‑
theme＝'dark']方式将所述深色主题写到所述HTML根节点。5.根据权利要求1所述的前端页面配色处理方法，其特征在于，所述步骤S3之后还包括：S4、获取到与预置标准配色格式输入的色值和色组配置指令；S5、根据所述色值和色组配置指令进行对应读取，并将对应色值添加至所述HTML根节点进行配色更新处理。6.根据权利要求5所述的前端页面配色处...

【专利技术属性】
技术研发人员：周小亮，
申请(专利权)人：平安银行股份有限公司，
类型：发明
国别省市：