一种主题风格切换方法及系统与流程

1.本技术涉及信息处理技术领域，更具体地说，涉及一种主题风格切换方法及系统。


背景技术：

2.在网页中，不同的系统会有不同的主题颜色风格。为了满足不同系统的主题颜色风格与不同用户的颜色主题偏好，因此需要提供主题风格切换的功能，来满足用户的个性化需求。
3.现有的主题风格切换包括如下三种切换方式，一是根据产品的特点进行分别编写多套不同的主题风格样式层叠表，在网页中提供给用户进行选择，实时与后端进行交互，获取当前用户选择的样色层叠表进行替换或者刷新网页来实现主题风格的切换；二是采用基于css预处理语言(less)的主题生成，使用less插入方式获取用户的配置信息提交给后端服务进行重新的编译，并生成新的css样式表文件，然后客户端获取后端返回的css样式表，添加到style标签的link中；三是使用var变量来进行定义颜色变量，从而来动态的改变颜色变量的值来进行改变。
4.通过方式一进行主题风格切换，由于需要刷新当前的网页，造成网页渲染的性能浪费；通过方式二进行主题风格切换，每次切换需要和服务器通信，需要等待less的编译，从而造成主题风格切换的效率低；通过方式三进行主题风格切换，不能兼容ie浏览器以及较低版本的浏览器。
5.因此，现有主题风格切换的方式会造成资源的浪费、切换效率低以及兼容性差。


技术实现要素：

6.有鉴于此，本技术公开了一种主题风格切换方法及系统，旨在避免当前网页请求的资源浪费，提高主题风格切换的效率和兼容性。
7.为了实现上述目的，其公开的技术方案如下：
8.本技术第一方面公开了一种主题风格切换方法，所述方法包括：
9.从获取到的样式文件中提取出颜色样式层叠表，并基于所述颜色样式层叠表确定主题颜色切换的基础样式；所述样式文件为展示网页的主题风格样式的文件；
10.当监测到主题风格发生变化时，基于变化的主题风格和所述基础样式，确定目标样式主题风格；
11.基于所述目标样式主题风格执行主题风格切换操作。
12.优选的，所述从获取到的样式文件中提取出颜色样式层叠表，并基于所述颜色样式层叠表确定主题颜色切换的基础样式，包括：
13.通过预设函数对从获取到的样式文件中抽离出颜色样式层叠表；所述颜色样式层叠表为与颜色值相关的样式内容；
14.将所述颜色样式层叠表写入到预设主题颜色文件，得到主题颜色切换的基础样式。
15.优选的，所述当监测到主题风格发生变化时，基于变化的主题风格和所述基础样式，确定目标样式主题风格，包括：
16.当接收到主题颜色修改指令或主题风格切换指令时，确定主题风格发生变化；
17.在主题风格发生变化的情况下，将所述基础样式的颜色值进行分类，得到预设占位符；
18.计算变化的主题风格的颜色值，得到预设格式的颜色值；
19.将所述预设占位符与所述预设格式的颜色值进行绑定，得到绑定结果；所述绑定结果用于对预设占位符与预设格式的颜色值进行绑定所作出的提示；
20.通过预设计算维度对所述预设格式的颜色值进行计算，得到目标颜色值；
21.通过所述目标颜色值替换所述绑定结果中的预设占位符，得到目标主题字符串；
22.将所述目标主题字符串更新所述基础样式，得到目标样式主题风格。
23.优选的，基于所述目标样式主题风格执行主题风格切换操作的过程，包括：
24.通过预设脚本，将所述目标样式主题风格替换预设标签中的主题颜色内容，完成主题风格切换。
25.优选的，还包括：
26.若未监测到所述预设标签，则创建所述预设标签；
27.通过所述预设脚本，将所述目标样式主题风格替换所述预设标签中的主题颜色内容，完成主题风格切换。
28.优选的，在所述从获取到的样式文件中提取出颜色样式层叠表，并基于所述颜色样式层叠表确定主题颜色切换的基础样式之后，还包括：
29.将所述基础样式存储至预设内存中。
30.本技术第二方面公开了一种主题风格切换系统，所述系统包括：
31.第一确定单元，用于从获取到的样式文件中提取出颜色样式层叠表，并基于所述颜色样式层叠表确定主题颜色切换的基础样式；所述样式文件为展示网页的主题风格样式的文件；
32.第二确定单元，用于当监测到主题风格发生变化时，基于变化的主题风格和所述基础样式，确定目标样式主题风格；
33.执行单元，用于基于所述目标样式主题风格执行主题风格切换操作。
34.优选的，所述第一确定单元，包括：
35.抽离模块，用于通过预设函数对从获取到的样式文件中抽离出颜色样式层叠表；所述颜色样式层叠表为与颜色值相关的样式内容；
36.获取模块，用于将所述颜色样式层叠表写入到预设主题颜色文件，得到主题颜色切换的基础样式。
37.优选的，所述第二确定单元，包括：
38.确定模块，用于当接收到主题颜色修改指令或主题风格切换指令时，确定主题风格发生变化；
39.分类模块，用于在主题风格发生变化的情况下，将所述基础样式的颜色值进行分类，得到预设占位符；
40.第一计算模块，用于计算变化的主题风格的颜色值，得到预设格式的颜色值；
41.绑定模块，用于将所述预设占位符与所述预设格式的颜色值进行绑定，得到绑定结果；所述绑定结果用于对预设占位符与预设格式的颜色值进行绑定所作出的提示；
42.第二计算模块，用于通过预设计算维度对所述预设格式的颜色值进行计算，得到目标颜色值；
43.替换模块，用于通过所述目标颜色值替换所述绑定结果中的预设占位符，得到目标主题字符串；
44.更新模块，用于将所述目标主题字符串更新所述基础样式，得到目标样式主题风格。
45.优选的，所述执行单元，具体用于：
46.通过预设脚本，将所述目标样式主题风格替换预设标签中的主题颜色内容，完成主题风格切换。
47.经由上述技术方案可知，本技术公开了一种主题风格切换方法及系统，从获取到的样式文件中提取出颜色样式层叠表，并基于颜色样式层叠表确定主题颜色切换的基础样式；样式文件为展示网页的主题风格样式的文件，当监测到主题风格发生变化时，基于变化的主题风格和基础样式，确定目标样式主题风格，基于目标样式主题风格执行主题风格切换操作。通过上述方案，无需动态刷新当前网页来实现主题风格的切换，避免当前网页请求的资源浪费。在切换主题风格的时候无须与服务器进行交互，实现无感知的主题风格自动切换，提高主题风格切换的效率。并且，主题风格切换可通过ie浏览器以及其他低版本的浏览器来实现，提高兼容性。
附图说明
48.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
49.图1为本技术实施例公开的一种主题风格切换方法的流程示意图；
50.图2为本技术实施例公开的确定主题颜色切换的基础样式的流程示意图；
51.图3为本技术实施例公开的确定目标样式主题风格的流程示意图；
52.图4为本技术实施例公开的一种主题风格切换系统的流程示意图。
具体实施方式
53.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
54.在本技术中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过
程、方法、物品或者设备中还存在另外的相同要素。
55.由背景技术可知，现有主题风格切换的方式会造成资源的浪费、切换效率低以及兼容性差。
56.为了解决上述问题，本技术实施例公开了一种主题风格切换方法及系统，无需动态刷新当前网页来实现主题风格的切换，避免当前网页请求的资源浪费。在切换主题风格的时候无须与服务器进行交互，实现无感知的主题风格自动切换，提高主题风格切换的效率。并且，主题风格切换可通过ie浏览器以及其他低版本的浏览器来实现，提高兼容性。具体实现方式通过下述实施例进行说明。
57.参考图1所示，为本技术实施例公开的一种主题风格切换方法的流程示意图，该主题风格切换方法主要包括如下步骤：
58.s101：从获取到的样式文件中提取出颜色样式层叠表，并基于颜色样式层叠表确定主题颜色切换的基础样式；样式文件为展示网页的主题风格样式的文件。
59.在s101中，主题颜色切换的基础样式为一个css文件，也可以为一个其他格式的文件，其文件的内容是获取的所有颜色值相关的样式字符串，与样式层叠表的内容一样，但不一定为样式层叠表，主要取决于编译生成文件的写入文件的格式(一般为了更加方便理解，直接生成层叠样式表的格式来管理维护)。
60.前端是采用工程化的方式来进行技术的开发和实现，因此，在部署前期(工程化的阶段)会将整体前端代码(html、css以及js代码等)进行编译。
61.具体从获取到的样式文件中提取出颜色样式层叠表，并基于颜色样式层叠表确定主题颜色切换的基础样式的过程如下：
62.首先，通过预设函数对从取到的样式文件中抽离出颜色样式层叠表；颜色样式层叠表为与颜色值相关的样式内容。
63.其中，样式文件包括所有的样式资源文件和网络中编写的样式内容等。
64.预设函数可以是钩子函数，也可以是其他函数等，具体预设函数的确定由技术人员根据实际情况进行设置，本技术不做具体限定。本技术的预设函数优选钩子函数。
65.利用打包编辑阶段提供的生命周期的钩子函数来遍历样式文件中所有的样式资源文件和网络中编写的样式内容，并对所有的样式资源文件和网络中编写的样式内容进行解析，将颜色值相关的样式内容全部进行编译抽离，形成一份极小的只有颜色值相关的样式层叠表，作为主题颜色切换的基础样式。
66.在编译阶段，通过对应css-loader(如：scss-loader，less-loader)等进行相关样式文件的编译，形成相关的js的样式运行文件；其次，在编译js阶段，采用plugins的插件方式，劫持js的运行过程，将颜色相关的内容进行遍历读取，通过主题模型将对应颜色信息获取与颜色值相关的样式内容。
67.编译可以是webpack编译、roolup编译，glup编译等，本方案不做具体限定。
68.与颜色值相关的样式内容包括rgb模式的颜色值，rgba的颜色值、16进制3位模式的颜色值等，16进制6位模式的颜色值(比如：rgb(0,0,0)，rgba(0，0，0，0.3)，#000，#000000))。
69.然后，将颜色样式层叠表写入到预设主题颜色文件，得到主题颜色切换的基础样式。
70.其中，通过文件写入的方式将对应的颜色样式层叠表写入到磁盘的themecolor.css文件中，形成主题颜色切换的基础样式。
71.在主题风格切换系统初始化时，将基础样式存储至主题风格切换系统的内存中。
72.s102：当监测到主题风格发生变化时，基于变化的主题风格和基础样式，确定目标样式主题风格。
73.具体当监测到主题风格发生变化时，基于变化的主题风格和基础样式，确定目标样式主题风格的过程如a1-a7所示。
74.a1：当接收到主题颜色修改指令或主题风格切换指令时，确定主题风格发生变化。
75.其中，监听用户选择不同的主题颜色(主题颜色修改指令)或选择对应的风格(主题风格切换指令)的操作，从而来触发主题模型的运行。
76.a2：在主题风格发生变化的情况下，将基础样式的颜色值进行分类，得到预设占位符。
77.其中，为了区分前后颜色的替换区分，所以将对应的主题计算出来的颜色进行取名打标签的形式，得到预设占位符，从而保证在进行主题模板新旧主题计算的过程中造成后者颜色覆盖前者的情况发生(比如：原风格为黑色，新风格为白色，此时替换就需要区分哪些是原来的白色，哪些是需要替换黑色为新的白色，而原来的白色又要根据主题模型计算自动转换为黑色，如果没有取名打标签的方式，就无法区分新旧的白色，从而造成计算后全部为白色的异常情况发生)。
78.a3：计算变化的主题风格的颜色值，得到预设格式的颜色值。
79.其中，通过主题模型来对应的用户选择选择不同的主题颜色或选择对应的风格进行计算，得到预设格式的颜色值。
80.通过主题模型来对应的用户选择选择不同的主题颜色或选择对应的风格进行拆分计算，得到预设格式的颜色值。
81.其中，拆分计算就是将一种类型的颜色值全部计算为其他几种类型的颜色值进行处理。例如，将对应6位的颜色值进行拆分计算，得到3位的颜色值、rgb的颜色值以及rgba的颜色值。
82.预设格式的颜色值可以是16进制3位字符串、16进制6位字符串、rgb模式字符串，rgba模式字符串等几种形式。
83.a4：将预设占位符与预设格式的颜色值进行绑定，得到绑定结果；绑定结果用于对预设占位符与预设格式的颜色值进行绑定所作出的提示。
84.a5：通过预设计算维度对预设格式的颜色值进行计算，得到目标颜色值。
85.其中，以rgb的计算维度(红、绿、蓝)按照5的步长进行遍历计算，得到目标颜色值。
86.在技术中，所有的颜色都是用红、绿、蓝三色的混合来实现的，所有的颜色值都是为0～255之间的数值，而在整个主题模型的计算中，所有相关的颜色值基本都是为5的，并且目前主流的ui库基本都是按照基础设计规范来实现的，基本的规范颜色偏差基本为5、10、15等不同的颜色值偏差，因此为了保证各个主流第三ui库都可以适应，采用了步长为5的计算方式，即每次计算都数字增加5来进行颜色值的计算，得到目标颜色值。
87.a6：通过目标颜色值替换绑定结果中的预设占位符，得到目标主题字符串。
88.其中，目标主题字符串由预设格式的颜色值和目标颜色值构成。
89.a7：将目标主题字符串更新基础样式，得到目标样式主题风格。
90.其中，将生成的目标主题字符串，插入到基础样式对应的body中来实现主题的变化，得到目标样式主题风格。
91.s103：基于目标样式主题风格执行主题风格切换操作。
92.在s103中，通过预设脚本，将目标样式主题风格替换预设标签中的主题颜色内容，完成主题风格切换。具体的，通过脚本将目标样式主题风格替换style标签中id名为themecolor的内容，完成主题风格切换。
93.无须与服务器交互的兼容各种低版本浏览器(如ie8及以上)的无感知完成整套系统的主题切换。
94.本技术的预设脚本不做具体限定。
95.在实际的网页中，不同的系统会有不同的主题颜色风格，用户也有自身喜欢的主要颜色偏好的需求，为了满足不同的系统风格可以与客户的ui规范一致，以及满足不同用户对自身颜色主题的喜好，因此提供主题风格切换的功能，满足客户和用户的个性化要求。
96.在应用场景实施例中，在用户第一次访问网页的过程中，根据当前的用户主题数据(用户主题颜色修改指令或主题风格切换指令)，向服务器发起请求，获取到抽离的颜色主题原始文件，并将对应的主题文件与主题的计算模型关联起来，成为主题计算模型的基础样式的颜色文件。同时，会将该基础样式的颜色文件的内容保存在当前主题风格切换的内存中，在后续的用户修改主题或者选取其他的颜色的时候，直接使用系统内存中的缓存数据进行主题模型的运行来实现新主题的变化。
97.用户可根据自身的喜好，切换任意主题风格，真正的实现千人千面。且无须与服务器进行多次通信，即可完成主题计算和替换，极大的节约了服务器的通信资源。
98.若未监测到预设标签，则创建预设标签，通过预设脚本，将目标样式主题风格替换预设标签中的主题颜色内容，完成主题风格切换。
99.其中，如果不存在预设标签(style标签)，则动态创建style标签，并将目标样式主题风格替换style标签中id名为themecolor的内容，从而实现无须与服务器交互的兼容各种低版本浏览器(如ie8及以上)的无感知完成整套系统的主题切换。
100.在整个主题风格切换方案中，按照当前的主流方式开源的第三方ui库均可适用。只是为了更好的说明当前方案的通用型，在编译过程将对应第三ui库中的颜色字段都抽离出来作为主题文件内容来源的一部分。
101.为了方便理解主题风格切换的过程，这里进行举例说明：
102.例如，首先将webpack拆分改为编译拆分(不限制一定为webpack，也可以是其他的编译实现，如：roolup，glup以及其他的实现均可)。
103.在编译(webpack编译、roolup编译，glup编译)阶段实现主题的计算，并通过编译拆分将系统中涉及到的所有颜色相关的内容全部抽离出来，形成一个基础的主题模板的文件(该文件中只有所有的颜色值的样式)。
104.将用户选择的自定义样式或者自定义主题替换发送到主题模型中，将对应的主题模板的颜色值进行占位符的打标签处理(即：将每一个颜色值都取一个对应的颜色名称，用于进行后需的主题替换)。
105.按照主题模型的计算规则，进行所有颜色值的计算(rgb模式计算、rgba模式计算、
16进制3位模式计算，16进制6位模式计算)，得到目标主题字符串。
106.将目标主题字符串作为新的主题模板，更新当前原内存缓存的主题模板内容，并且将插入到基础样式对应的body中来实现主题的变化，得到目标样式主题风格。
107.通过脚本将目标样式主题风格替换style标签中id名为themecolor的内容，完成主题风格切换。
108.本技术实施例中，无需动态刷新当前网页来实现主题风格的切换，避免当前网页请求的资源浪费。在切换主题风格的时候无须与服务器进行交互，实现无感知的主题风格自动切换，提高主题风格切换的效率。并且，主题风格切换可通过ie浏览器以及其他低版本的浏览器来实现，提高兼容性。
109.参考图2所示，为上述s101中涉及到的从获取到的样式文件中提取出颜色样式层叠表，并基于颜色样式层叠表确定主题颜色切换的基础样式的过程，主要包括如下步骤：
110.s201：通过预设函数对从取到的样式文件中抽离出颜色样式层叠表；颜色样式层叠表为与颜色值相关的样式内容。
111.s202：将颜色样式层叠表写入到预设主题颜色文件，得到主题颜色切换的基础样式。
112.s201-s202的执行原理与执行过程与上述s101中从获取到的样式文件中提取出颜色样式层叠表，并基于颜色样式层叠表确定主题颜色切换的基础样式的执行过程和执行原理一致，可参考，此处不再进行赘述。
113.本技术实施例中，通过预设函数对从取到的样式文件中抽离出颜色样式层叠表；颜色样式层叠表为与颜色值相关的样式内容，将颜色样式层叠表写入到预设主题颜色文件，实现得到主题颜色切换的基础样式的目的。
114.参考图3所示，为上述s102中涉及到的当监测到主题风格发生变化时，基于变化的主题风格和基础样式，确定目标样式主题风格的过程，主要包括如下步骤：
115.s301：当接收到主题颜色修改指令或主题风格切换指令时，确定主题风格发生变化。
116.s302：在主题风格发生变化的情况下，将基础样式的颜色值进行分类，得到预设占位符。
117.s303：计算变化的主题风格的颜色值，得到预设格式的颜色值。
118.s304：将预设占位符与所述预设格式的颜色值进行绑定，得到绑定结果；绑定结果用于对预设占位符与预设格式的颜色值进行绑定所作出的提示。
119.s305：通过预设计算维度对预设格式的颜色值进行计算，得到目标颜色值。
120.s306：通过目标颜色值替换绑定结果中的预设占位符，得到目标主题字符串。
121.s307：将目标主题字符串更新基础样式，得到目标样式主题风格。
122.s301-s307的执行过程和执行原理与上述s102中当监测到主题风格发生变化时，基于变化的主题风格和基础样式，确定目标样式主题风格的执行过程和执行原理一致，可参考，此处不再进行赘述。
123.本技术实施例中，当监测到主题风格发生变化时，基于变化的主题风格和基础样式，确定目标样式主题风格，实现通过目标样式主题风格执行主题风格切换操作的目的。
124.基于上述实施例图1公开的一种主题风格切换方法，本技术实施例还对应的公开
了一种主题风格切换系统，如图4所示，该主题风格切换系统主要包括第一确定单元401、第二确定单元402和执行单元403。
125.第一确定单元401，用于从获取到的样式文件中提取出颜色样式层叠表，并基于颜色样式层叠表确定主题颜色切换的基础样式；样式文件为展示网页的主题风格样式的文件。
126.第二确定单元402，用于当监测到主题风格发生变化时，基于变化的主题风格和基础样式，确定目标样式主题风格。
127.执行单元403，用于基于目标样式主题风格执行主题风格切换操作。
128.进一步的，第一确定单元401包括抽离模块和获取模块。
129.抽离模块，用于通过预设函数对从获取到的样式文件中抽离出颜色样式层叠表；颜色样式层叠表为与颜色值相关的样式内容。
130.获取模块，用于将颜色样式层叠表写入到预设主题颜色文件，得到主题颜色切换的基础样式。
131.进一步的，第二确定单元402包括确定模块、分类模块、第一计算模块、绑定模块、第二计算模块、替换模块和更新模块。
132.确定模块，用于当接收到主题颜色修改指令或主题风格切换指令时，确定主题风格发生变化。
133.分类模块，用于在主题风格发生变化的情况下，将基础样式的颜色值进行分类，得到预设占位符。
134.第一计算模块，用于计算变化的主题风格的颜色值，得到预设格式的颜色值。
135.绑定模块，用于将预设占位符与预设格式的颜色值进行绑定，得到绑定结果；绑定结果用于对预设占位符与预设格式的颜色值进行绑定所作出的提示。
136.第二计算模块，用于通过预设计算维度对预设格式的颜色值进行计算，得到目标颜色值。
137.替换模块，用于通过目标颜色值替换绑定结果中的预设占位符，得到目标主题字符串。
138.更新模块，用于将目标主题字符串更新基础样式，得到目标样式主题风格。
139.进一步的，执行单元403，具体用于通过预设脚本，将目标样式主题风格替换预设标签中的主题颜色内容，完成主题风格切换。
140.进一步的，主题风格切换系统还包括创建单元和替换单元。
141.创建单元，用于若未监测到预设标签，则创建预设标签。
142.替换单元，用于通过预设脚本，将目标样式主题风格替换预设标签中的主题颜色内容，完成主题风格切换。
143.进一步的，主题风格切换系统还包括存储单元。
144.存储单元，用于将基础样式存储至内存中。
145.本技术实施例中，无需动态刷新当前网页来实现主题风格的切换，避免当前网页请求的资源浪费。在切换主题风格的时候无须与服务器进行交互，实现无感知的主题风格自动切换，提高主题风格切换的效率。并且，主题风格切换可通过ie浏览器以及其他低版本的浏览器来实现，提高兼容性。
146.对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本技术并不受所描述的动作顺序的限制，因为依据本技术，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本技术所必须的。
147.需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于系统类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
148.本技术各实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。
149.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。
150.对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
151.以上所述仅是本技术的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本技术原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本技术的保护范围。