页面主题色更换方法、装置、计算机设备及存储介质制造方法及图纸

本发明专利技术涉及研发管理技术领域，提供了一种页面主题色更换方法、装置、计算机设备及存储介质，所述方法包括：获取预定义主题色中的颜色变量，并根据所述颜色变量确定包含第一主题色的第一颜色样式文件；在接收到用户的页面主题色更换指令时，根据所述页面主题色更换指令对所述第一颜色样式文件中的第一主题色进行更换，生成包含第二主题色的第二颜色样式文件；动态加载所述第二颜色样式文件，并使用加载的所述第二颜色样式文件中的第二主题色更换原主题色。本发明专利技术能够能够实现快速生成一整套主题色，不仅可解决系统组件中的主题色更换需求，而且可满足于用户即时使用的体验。而且可满足于用户即时使用的体验。而且可满足于用户即时使用的体验。

【技术实现步骤摘要】
页面主题色更换方法、装置、计算机设备及存储介质


[0001]本专利技术涉及研发管理的
，尤其揭露了一种页面主题色更换方法、装置、计算机设备及存储介质。

技术介绍

[0002]在当今的互联网时代，用户数量多，更多的用户越来越重视页面审美以及产品的使用体验，因此，网站和App换肤的需求日趋强烈。当目前常见的现有技术为手动编写出多套主题色的样式，通过class进行样式覆盖，但该现有技术需要花费大量人力去编写出多套主题色，而且由于数量多，不好维护，同时在需要新增一个主题色时，又需要花费大量时间去编写一套颜色样式，明显会影响到用户即时的使用体验；因此，本领域技术人员亟需寻找一种新的技术方案来解决上述的问题。

技术实现思路

[0003]基于此，有必要针对上述技术问题，提供一种页面主题色更换方法、装置、计算机设备及存储介质，能够实现快速生成一整套主题色，不仅可解决系统组件中的主题色更换需求，而且可满足于用户即时使用的体验。
[0004]一种页面主题色更换方法，所述方法包括：
[0005]获取预定义主题色中的颜色变量，并根据所述颜色变量确定包含第一主题色的第一颜色样式文件；
[0006]在接收到用户的页面主题色更换指令时，根据所述页面主题色更换指令对所述第一颜色样式文件中的第一主题色进行更换，生成包含第二主题色的第二颜色样式文件；
[0007]动态加载所述第二颜色样式文件，并使用加载的所述第二颜色样式文件中的第二主题色更换原主题色。
[0008]一种页面主题色更换装置，所述装置包括：
[0009]确定模块，用于获取预定义主题色中的颜色变量，并根据所述颜色变量确定包含第一主题色的第一颜色样式文件；
[0010]生成模块，用于在接收到用户的页面主题色更换指令时，根据所述页面主题色更换指令对所述第一颜色样式文件中的第一主题色进行更换，生成包含第二主题色的第二颜色样式文件；
[0011]更换模块，用于动态加载所述第二颜色样式文件，并使用加载的所述第二颜色样式文件中的第二主题色更换原主题色。
[0012]一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述一种页面主题色更换方法。
[0013]一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述一种页面主题色更换方法。
[0014]上述页面主题色更换方法、装置、计算机设备及存储介质，可快速生成一整套新的主题色，并使用新的主题色对原主题色进行动态更换，另外此种更换方式比较灵活，可以自定义任意一种主题色，无需准备多套主题对应的主题色，可见，不仅可解决系统组件中的主题色更换需求，而且可满足于用户即时使用的体验。
附图说明
[0015]为了更清楚地说明本专利技术实施例的技术方案，下面将对本专利技术实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
[0016]图1是本专利技术一实施例中一种页面主题色更换方法的一应用环境示意图；
[0017]图2是本专利技术一实施例中一种页面主题色更换方法的一流程示意图；
[0018]图3是本专利技术一实施例中一种页面主题色更换装置的结构示意图；
[0019]图4是本专利技术一实施例中计算机设备的一示意图。
具体实施方式
[0020]下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0021]本专利技术提供的一种页面主题色更换方法，可应用在如图1的应用环境中，其中，客户端通过网络与服务器进行通信。其中，客户端可以但不限于各种个人计算机、笔记本电脑、智能手机、平板电脑和便携式可穿戴设备。服务器可以是独立的服务器，服务器也可以是多个服务器组成的服务器集群来实现。
[0022]在一实施例中，如图2所示，提供一种页面主题色更换方法，以该方法应用在图1服务器为例进行说明，包括如下步骤S10
‑
S30：
[0023]S10，获取预定义主题色中的颜色变量，并根据所述颜色变量确定包含第一主题色的第一颜色样式文件；
[0024]可理解地，主题色是用于描述页面的颜色，其页面显示于网站或者APP；颜色变量是用于描述主题色颜色的数值，其一个数值可以对应一个颜色(因此数值可以用于区分不同的颜色)，如$themes_black_0、$themes_white_50和$themes_white_40，其中，$themes_black_0对应于#1F86FF颜色，$themes_white_50对应于#FF颜色，$themes_white_40对应于#EBF4FF颜色；第一颜色样式文件中包括但不限于autocomplete样式、avatar样式、badge样式、breadcrumb样式、button
‑
group样式、button样式和card样式，其中，button样式使用颜色变量进行定义，如使用$font_color_40，其可以对应上述的颜色变量$themes_white_40。
[0025]S20，在接收到用户的页面主题色更换指令时，根据所述页面主题色更换指令对所述第一颜色样式文件中的第一主题色进行更换，生成包含第二主题色的第二颜色样式文件；
[0026]可理解地，接收到用户的页面主题色更换指令是可以通过用户在页面颜色下拉框选择的颜色进行确定，如用户在页面颜色下拉框选择的颜色为橘色，此时页面主题色更换指令中的更换颜色即为橘色，因此在UI页面中的颜色下拉框需要提前设置多个可以选择的颜色；第一主题色是第一颜色样式文件中已经设置好的颜色，第二主题色是与用户选择的主题色相对应的颜色；具体地，在存放文件夹node_modules可查询到第一颜色样式文件，在接收到对页面主题色更换指令时，即可通过查询到的第一颜色样式文件对第一主题色进行更换，并执行下发指令以编译生成新的第二颜色样式文件，生成的第二颜色样式文件样式被在项目中的代码引用，同时放置static文件夹下，其中，引入新的主题色，需要设置引入路径，可通过import语句引出static文件夹下的路径，并可引出对应的颜色，如字体图标的颜色样式等。
[0027]S30，动态加载所述第二颜色样式文件，并使用加载的所述第二颜色样式文件中的第二主题色更换原主题色。
[0028]可理解地，动态加载是页面加载出第二颜色样式文件的方式，以动态的方式可实现自由动态切换页面中的样式，进而可实现动态更换主题色；原主题色是原先页面存在的颜色，其具体表现在原颜色样式文件中。
[0029]在步骤S1本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种页面主题色更换方法，其特征在于，所述方法包括：获取预定义主题色中的颜色变量，并根据所述颜色变量确定包含第一主题色的第一颜色样式文件；在接收到用户的页面主题色更换指令时，根据所述页面主题色更换指令对所述第一颜色样式文件中的第一主题色进行更换，生成包含第二主题色的第二颜色样式文件；动态加载所述第二颜色样式文件，并使用加载的所述第二颜色样式文件中的第二主题色更换原主题色。2.根据权利要求1所述的页面主题色更换方法，其特征在于，所述获取预定义主题色中的颜色变量，包括：获取获取预定义一个主色；根据HSL值对所述主色的亮度值进行修改，得到与所述主色相同色系的辅色；根据预设的主题色深浅度变换公式对所述主色进行变换，得到一套不同深浅度的主色；将不同深浅度的所述主色和辅色预定义成主题色中的颜色变量。3.根据权利要求1或2所述的页面主题色更换方法，其特征在于，所述根据所述颜色变量确定包含第一主题色的第一颜色样式文件，包括：在预设的组件库中，根据所述颜色变量中的主色和辅色生成不同样式且包含所述第一主题色的第一颜色样式文件。4.根据权利要求1所述的页面主题色更换方法，其特征在于，所述根据所述页面主题色更换指令对所述第一颜色样式文件中的第一主题色进行更换，生成包含第二主题色的第二颜色样式文件，包括：根据所述页面主题色更换指令得到更换主题色信息；根据所述更换主色信息对所述第一主题色进行变换，得到不同于所述第一主题色的第二主题色；根据所述第二主题色生成所述第二颜色样式文件。5.根据权利要求1所述的页面主题色更换方法，其特征在于，所述动态加载所述第二颜色样式文件之前，还包括：在预设的页面切换文件中，预先获取在页面中创建的链接标签；...

【专利技术属性】
技术研发人员：彭义莎，
申请(专利权)人：中国平安人寿保险股份有限公司，
类型：发明
国别省市：