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

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

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


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

技术介绍

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

技术实现思路

[0005]本申请提供了一种前端页面配色处理方法、装置、设备及存储介质，解决了目前通过CSS自定义属性方式实现配色的方法，造成了研发和设计之间较大沟通成本，以及前端工程师因为需要硬编码多份色值的大开发量所导致的人工耗费和效率低的技术问题。
[0006]有鉴于此，本申请第一方面提供了一种前端页面配色处理方法，方法包括：
[0007]S1、获取到HTML根节点添加色彩body标签指令；
[0008]S2、根据body标签指令对custom函数进行深色主题和浅色主题的十六进制色值编译转换；
[0009]S3、通过PostCSS插件将深色主题写到HTML根节点。
[0010]优选地，步骤S1具体包括：
[0011]S11、获取到HTML根节点添加色彩body标签为白色、深色和黑色的指令。
[0012]优选地，步骤S2具体包括：
[0013]S21、根据body标签指令通过WebPack配置自定义PostCSS插件对custom函数进行深色主题和浅色主题的十六进制色值编译转换。
[0014]优选地，步骤S3具体包括：
[0015]S31、原地编译CSS中的颜色为浅色主题对应色值；
[0016]S32、通过PostCSS插件按照html[data
‑
theme＝'dark']方式将深色主题写到HTML根节点。
[0017]优选地，步骤S3之后还包括：
[0018]S4、获取到与预置标准配色格式输入的色值和色组配置指令；
[0019]S5、根据色值和色组配置指令进行对应读取，并将对应色值添加至HTML根节点进行配色更新处理。
[0020]优选地，预置标准配色格式为JSON或YML格式。
[0021]优选地，色彩body标签为body{background
‑
color:#ffffff}、html[my
‑
theme＝
‘
dark
’
]、body{background
‑
color:#000000}。
[0022]本申请第二方面提供一种前端页面配色处理装置，装置包括：
[0023]指令获取单元，用于在获取到HTML根节点添加色彩body标签指令；
[0024]色组编译单元，用于根据body标签指令对custom函数进行深色主题和浅色主题的十六进制色值编译转换；
[0025]主题写入单元，用于通过PostCSS插件将深色主题写到HTML根节点。
[0026]本申请第三方面提供一种前端页面配色处理设备，设备包括处理器以及存储器：
[0027]存储器用于存储程序代码，并将程序代码传输给处理器；
[0028]处理器用于根据程序代码中的指令，执行如上述第一方面的前端页面配色处理方法的步骤。
[0029]本申请第四方面提供一种计算机可读存储介质，计算机可读存储介质用于存储程序代码，程序代码用于执行上述第一方面的前端页面配色处理方法的步骤。
[0030]从以上技术方案可以看出，本申请实施例具有以下优点：
[0031]本申请中，提供了一种前端页面配色处理方法、装置、设备及存储介质，通过获取到HTML根节点添加色彩body标签指令，然后根据body标签指令对custom函数进行深色主题和浅色主题的十六进制色值编译转换，最后通过PostCSS插件将深色主题写到HTML根节点，解决了目前通过CSS自定义属性方式实现配色的方法，造成了研发和设计之间较大沟通成本，以及前端工程师因为需要硬编码多份色值的大开发量所导致的人工耗费和效率低的技术问题。
[0032]进一步，本申请获取到与预置标准配色格式输入的色值和色组配置指令，并根据色值和色组配置指令进行对应读取，并将对应色值添加至HTML根节点进行配色更新处理，实现了设计团队可以专门维护色组和色值，最终只提供给开发者色组，在此基础上，完全可以抽象出一个色组和色值平台，方便设计团队更新内容。这个平台可以以JSON或YML等任何形式存储色值和色组的对应关系，方便各个团队协作的有益效果。
附图说明
[0033]图1为本申请实施例中一种前端页面配色处理方法的一个实施例的流程图；
[0034]图2为本申请实施例中一种前端页面配色处理方法的应用场景的流程图；
[0035]图3为本申请实施例中一种前端页面配色处理装置的结构示意图；
[0036]图4为本申请实施例中一种前端页面配色处理设备的结构示意图。
具体实施方式
[0037]为了使本
的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本
申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
[0038]本申请涉及了一种前端页面配色处理方法、装置、设备及存储介质，解决了目前通过CSS自定义属性方式实现配色的方法，造成了研发和设计之间较大沟通成本，以及前端工程师因为需要硬编码多份色值的大开发量所导致的人工耗费和效率低的技术问题。
[0039]为了便于理解，请参阅图1，图1为本申请实施例中一种前端页面配色处理方法的方法流程图，如图1所示，具体为：
[0040]S1、获取到HTML根节点添加色彩body标签指令；
[0041]需要说明的是，具体获取到HTML根节点添加色彩body标签为白色、深色和黑色的指令，其中色彩body标签为body{background
‑
color:#ffff本文档来自技高网...

【技术保护点】

【技术特征摘要】
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所述的前端页面配色处...

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