一种主题风格切换方法及系统技术方案

技术编号:32460431 阅读:15 留言:0更新日期:2022-02-26 08:47
本申请公开了一种主题风格切换方法及系统,从获取到的样式文件中提取出颜色样式层叠表,并基于颜色样式层叠表确定主题颜色切换的基础样式;样式文件为展示网页的主题风格样式的文件,当监测到主题风格发生变化时,基于变化的主题风格和基础样式,确定目标样式主题风格,基于目标样式主题风格执行主题风格切换操作。通过上述方案,无需动态刷新当前网页来实现主题风格的切换,避免当前网页请求的资源浪费。在切换主题风格的时候无须与服务器进行交互,实现无感知的主题风格自动切换,提高主题风格切换的效率。并且,主题风格切换可通过IE浏览器以及其他低版本的浏览器来实现,提高兼容性。容性。容性。

【技术实现步骤摘要】
一种主题风格切换方法及系统


[0001]本申请涉及信息处理
,更具体地说,涉及一种主题风格切换方法及系统。

技术介绍

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

技术实现思路

[0006]有鉴于此,本申请公开了一种主题风格切换方法及系统,旨在避免当前网页请求的资源浪费,提高主题风格切换的效率和兼容性。
[0007]为了实现上述目的,其公开的技术方案如下:
[0008]本申请第一方面公开了一种主题风格切换方法,所述方法包括:
[0009]从获取到的样式文件中提取出颜色样式层叠表,并基于所述颜色样式层叠表确定主题颜色切换的基础样式;所述样式文件为展示网页的主题风格样式的文件;
[0010]当监测到主题风格发生变化时,基于变化的主题风格和所述基础样式,确定目标样式主题风格;
[0011]基于所述目标样式主题风格执行主题风格切换操作。
[0012]优选的,所述从获取到的样式文件中提取出颜色样式层叠表,并基于所述颜色样式层叠表确定主题颜色切换的基础样式,包括:
[0013]通过预设函数对从获取到的样式文件中抽离出颜色样式层叠表;所述颜色样式层叠表为与颜色值相关的样式内容;
[0014]将所述颜色样式层叠表写入到预设主题颜色文件,得到主题颜色切换的基础样式。
[0015]优选的,所述当监测到主题风格发生变化时,基于变化的主题风格和所述基础样式,确定目标样式主题风格,包括:
[0016]当接收到主题颜色修改指令或主题风格切换指令时,确定主题风格发生变化;
[0017]在主题风格发生变化的情况下,将所述基础样式的颜色值进行分类,得到预设占位符;
[0018]计算变化的主题风格的颜色值,得到预设格式的颜色值;
[0019]将所述预设占位符与所述预设格式的颜色值进行绑定,得到绑定结果;所述绑定结果用于对预设占位符与预设格式的颜色值进行绑定所作出的提示;
[0020]通过预设计算维度对所述预设格式的颜色值进行计算,得到目标颜色值;
[0021]通过所述目标颜色值替换所述绑定结果中的预设占位符,得到目标主题字符串;
[0022]将所述目标主题字符串更新所述基础样式,得到目标样式主题风格。
[0023]优选的,基于所述目标样式主题风格执行主题风格切换操作的过程,包括:
[0024]通过预设脚本,将所述目标样式主题风格替换预设标签中的主题颜色内容,完成主题风格切换。
[0025]优选的,还包括:
[0026]若未监测到所述预设标签,则创建所述预设标签;
[0027]通过所述预设脚本,将所述目标样式主题风格替换所述预设标签中的主题颜色内容,完成主题风格切换。
[0028]优选的,在所述从获取到的样式文件中提取出颜色样式层叠表,并基于所述颜色样式层叠表确定主题颜色切换的基础样式之后,还包括:
[0029]将所述基础样式存储至预设内存中。
[0030]本申请第二方面公开了一种主题风格切换系统,所述系统包括:
[0031]第一确定单元,用于从获取到的样式文件中提取出颜色样式层叠表,并基于所述颜色样式层叠表确定主题颜色切换的基础样式;所述样式文件为展示网页的主题风格样式的文件;
[0032]第二确定单元,用于当监测到主题风格发生变化时,基于变化的主题风格和所述基础样式,确定目标样式主题风格;
[0033]执行单元,用于基于所述目标样式主题风格执行主题风格切换操作。
[0034]优选的,所述第一确定单元,包括:
[0035]抽离模块,用于通过预设函数对从获取到的样式文件中抽离出颜色样式层叠表;所述颜色样式层叠表为与颜色值相关的样式内容;
[0036]获取模块,用于将所述颜色样式层叠表写入到预设主题颜色文件,得到主题颜色切换的基础样式。
[0037]优选的,所述第二确定单元,包括:
[0038]确定模块,用于当接收到主题颜色修改指令或主题风格切换指令时,确定主题风格发生变化;
[0039]分类模块,用于在主题风格发生变化的情况下,将所述基础样式的颜色值进行分类,得到预设占位符;
[0040]第一计算模块,用于计算变化的主题风格的颜色值,得到预设格式的颜色值;
[0041]绑定模块,用于将所述预设占位符与所述预设格式的颜色值进行绑定,得到绑定结果;所述绑定结果用于对预设占位符与预设格式的颜色值进行绑定所作出的提示;
[0042]第二计算模块,用于通过预设计算维度对所述预设格式的颜色值进行计算,得到目标颜色值;
[0043]替换模块,用于通过所述目标颜色值替换所述绑定结果中的预设占位符,得到目标主题字符串;
[0044]更新模块,用于将所述目标主题字符串更新所述基础样式,得到目标样式主题风格。
[0045]优选的,所述执行单元,具体用于:
[0046]通过预设脚本,将所述目标样式主题风格替换预设标签中的主题颜色内容,完成主题风格切换。
[0047]经由上述技术方案可知,本申请公开了一种主题风格切换方法及系统,从获取到的样式文件中提取出颜色样式层叠表,并基于颜色样式层叠表确定主题颜色切换的基础样式;样式文件为展示网页的主题风格样式的文件,当监测到主题风格发生变化时,基于变化的主题风格和基础样式,确定目标样式主题风格,基于目标样式主题风格执行主题风格切换操作。通过上述方案,无需动态刷新当前网页来实现主题风格的切换,避免当前网页请求的资源浪费。在切换主题风格的时候无须与服务器进行交互,实现无感知的主题风格自动切换,提高主题风格切换的效率。并且,主题风格切换可通过IE浏览器以及其他低版本的浏览器来实现,提高兼容性。
附图说明
[00本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种主题风格切换方法,其特征在于,所述方法包括:从获取到的样式文件中提取出颜色样式层叠表,并基于所述颜色样式层叠表确定主题颜色切换的基础样式;所述样式文件为展示网页的主题风格样式的文件;当监测到主题风格发生变化时,基于变化的主题风格和所述基础样式,确定目标样式主题风格;基于所述目标样式主题风格执行主题风格切换操作。2.根据权利要求1所述的方法,其特征在于,所述从获取到的样式文件中提取出颜色样式层叠表,并基于所述颜色样式层叠表确定主题颜色切换的基础样式,包括:通过预设函数对从获取到的样式文件中抽离出颜色样式层叠表;所述颜色样式层叠表为与颜色值相关的样式内容;将所述颜色样式层叠表写入到预设主题颜色文件,得到主题颜色切换的基础样式。3.根据权利要求1所述的方法,其特征在于,所述当监测到主题风格发生变化时,基于变化的主题风格和所述基础样式,确定目标样式主题风格,包括:当接收到主题颜色修改指令或主题风格切换指令时,确定主题风格发生变化;在主题风格发生变化的情况下,将所述基础样式的颜色值进行分类,得到预设占位符;计算变化的主题风格的颜色值,得到预设格式的颜色值;将所述预设占位符与所述预设格式的颜色值进行绑定,得到绑定结果;所述绑定结果用于对预设占位符与预设格式的颜色值进行绑定所作出的提示;通过预设计算维度对所述预设格式的颜色值进行计算,得到目标颜色值;通过所述目标颜色值替换所述绑定结果中的预设占位符,得到目标主题字符串;将所述目标主题字符串更新所述基础样式,得到目标样式主题风格。4.根据权利要求1所述的方法,其特征在于,基于所述目标样式主题风格执行主题风格切换操作的过程,包括:通过预设脚本,将所述目标样式主题风格替换预设标签中的主题颜色内容,完成主题风格切换。5.根据权利要求4所述的方法,其特征在于,还包括:若未监测到所述预设标签,则创建所述预设标签;通过所述预设脚本,将所述目标样式主题风格替换所述预设标签中的主题颜色内容,完成主题风格切换。6.根据权利要...

【专利技术属性】
技术研发人员:袁胜超武轶文周怡陈芯
申请(专利权)人:上海金仕达成括信息科技有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1