一种基于javaScript实现web系统主题切换的方法技术方案

本发明专利技术公开一种基于javaScript实现web系统主题切换的方法，涉及系统前端管理技术领域；基于javaScript，针对前端web系统主题分别实现主题色切换、字体大小调节和字体风格切换，无需每增加一种主题就重新进行开发或配置，可以灵活配置主题色、字体大小及字体风格，以全局变量的形式应用于系统的各个页面中，易于拓展。于拓展。于拓展。

【技术实现步骤摘要】
一种基于javaScript实现web系统主题切换的方法


[0001]本专利技术公开一种方法，涉及系统前端管理
，具体地说是一种基于javaScript实现web系统主题切换的方法。

技术介绍

[0002]web系统的主题切换，以主题色、字体大小、字体风格三方面为主。现有的web系统主题切换技术，多数是固定的几种主题样式进行切换。而每增加一种主题需要重新进行开发或配置，以全局变量的形式应用于系统的各个页面中，因此缺少灵活性，不易于拓展。

技术实现思路

[0003]本专利技术针对现有技术的问题，提供一种基于javaScript实现web系统主题切换的方法，本专利技术提出的具体方案是：
[0004]本专利技术提供一种基于javaScript实现web系统主题切换的方法，基于javaScript，针对前端web系统主题分别实现主题色切换、字体大小调节和字体风格切换，
[0005]其中实现主题色切换时，先处理主题色切换的颜色来源，颜色来源包括组件库来源、公共样式来源和内部样式来源，针对组件库来源，从组件库的样式库中利用CSS预处理语言Less提取静态样式文件，获取静态样式文件中Less变量的集合，获得主题色变量，使所有主题相关的颜色依赖于主题色变量，
[0006]针对公共样式来源和内部样式来源的样式文件，同样利用预处理语言Less修改，使所有主题相关的颜色依赖于主题色变量，
[0007]所述主题色变量成为全局Less变量，通过webpack插件提取全局Less变量的颜色样式，以style标签的形式插入到DOM中，通过JS控制DOM中注入style的方式来切换颜色，
[0008]实现字体大小调节和字体风格切换时，在DOM的根节点以px设置字体大小，定义根节点的下一节点body的默认字体值，并在body设置全局的字体风格，使字体大小属性和字体风格属性供内部元素继承，通过修改body中的相应属性值调节字体大小或修改字体风格；
[0009]将实现主题色切换的方法与实现字体大小调节和字体风格切换的方法进行封装并在本地缓存保存，用于web系统主题切换。
[0010]进一步，所述的一种基于javaScript实现web系统主题切换的方法中所述实现主题色切换时，组件库来源为view
‑
design组件库，获得主题色变量@primary
‑
color，以tint、fade或shade方式修改所有主题相关的其他颜色变量，使所有主题相关的颜色依赖于主题色变量。
[0011]进一步，所述的一种基于javaScript实现web系统主题切换的方法中所述实现主题色切换时，通过webpack插件提取全局Less变量的颜色样式，根据主题色计算主题色系列色值，调用webpack
‑
theme
‑
color
‑
replacer的切换方法进行切换，切换后的颜色样式直接替换DOM中已有的颜色样式，生效。
[0012]进一步，所述的一种基于javaScript实现web系统主题切换的方法中所述实现字体大小调节时，根节点的字体设置在12px以上，用于浏览器监测字体变化，并相应修改字体大小或元素长度单位rem的比例。
[0013]进一步，所述的一种基于javaScript实现web系统主题切换的方法中针对同一域名的其他系统，通过本地缓存保存的实现主题色切换的方法与实现字体大小调节和字体风格切换的方法进行web系统主题切换。
[0014]进一步，所述的一种基于javaScript实现web系统主题切换的方法中针对非一域名的其他系统，根据实现主题色切换的方法与实现字体大小调节和字体风格切换的方法定义页面的覆盖样式，通过嵌入方法将覆盖样式组织为一个style节点插入到DOM中，使覆盖样式在其他系统中生效。
[0015]本专利技术还提供一种基于javaScript实现web系统主题切换的系统，包括主题色切换模块、字体管理模块和样式封装模块，
[0016]所述系统基于javaScript，针对前端web系统主题分别实现主题色切换、字体大小调节和字体风格切换，
[0017]主题色切换模块实现主题色切换时，先处理主题色切换的颜色来源，颜色来源包括组件库来源、公共样式来源和内部样式来源，针对组件库来源，从组件库的样式库中利用CSS预处理语言Less提取静态样式文件，获取静态样式文件中Less变量的集合，获得主题色变量，使所有主题相关的颜色依赖于主题色变量，
[0018]针对公共样式来源和内部样式来源的样式文件，同样利用预处理语言Less修改，使所有主题相关的颜色依赖于主题色变量，
[0019]所述主题色变量成为全局Less变量，通过webpack插件提取全局Less变量的颜色样式，以style标签的形式插入到DOM中，通过JS控制DOM中注入style的方式来切换颜色，
[0020]字体管理模块实现字体大小调节和字体风格切换时，在DOM的根节点以px设置字体大小，定义根节点的下一节点body的默认字体值，并在body设置全局的字体风格，使字体大小属性和字体风格属性供内部元素继承，通过修改body中的相应属性值调节字体大小或修改字体风格；
[0021]样式封装模块将实现主题色切换的方法与实现字体大小调节和字体风格切换的方法进行封装并在本地缓存保存，用于web系统主题切换。
[0022]本专利技术还提供一种基于javaScript实现web系统主题切换的装置，包括：至少一个存储器和至少一个处理器；
[0023]所述至少一个存储器，用于存储机器可读程序；
[0024]所述至少一个处理器，用于调用所述机器可读程序，执行所述的一种基于javaScript实现web系统主题切换的方法。
[0025]本专利技术的有益之处是：
[0026]本专利技术提供一种基于javaScript实现web系统主题切换的方法，无需每增加一种主题就重新进行开发或配置，可以灵活配置主题色、字体大小及字体风格，以全局变量的形式应用于系统的各个页面中，易于拓展。
附图说明
[0027]为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0028]图1是本专利技术方法主题色切换流程示意图。
[0029]图2是组件库的静态样式文件结构示意图。
[0030]图3是主题切换界面示意图。
[0031]图4是主题色调色板界面示意图。
[0032]图5是字体风格切换界面对照示意图。
具体实施方式
[0033]下面结合附图和具体实施例对本专利技术作进一步说明，以使本领域的技术人员可以更好地理解本专利技术并能予以实施，但所举实施例不作为对本专利技术的限定。...

【技术保护点】

【技术特征摘要】
1.一种基于javaScript实现web系统主题切换的方法，其特征是基于javaScript，针对前端web系统主题分别实现主题色切换、字体大小调节和字体风格切换，其中实现主题色切换时，先处理主题色切换的颜色来源，颜色来源包括组件库来源、公共样式来源和内部样式来源，针对组件库来源，从组件库的样式库中利用CSS预处理语言Less提取静态样式文件，获取静态样式文件中Less变量的集合，获得主题色变量，使所有主题相关的颜色依赖于主题色变量，针对公共样式来源和内部样式来源的样式文件，同样利用预处理语言Less修改，使所有主题相关的颜色依赖于主题色变量，所述主题色变量成为全局Less变量，通过webpack插件提取全局Less变量的颜色样式，以style标签的形式插入到DOM中，通过JS控制DOM中注入style的方式来切换颜色，实现字体大小调节和字体风格切换时，在DOM的根节点以px设置字体大小，定义根节点的下一节点body的默认字体值，并在body设置全局的字体风格，使字体大小属性和字体风格属性供内部元素继承，通过修改body中的相应属性值调节字体大小或修改字体风格；将实现主题色切换的方法与实现字体大小调节和字体风格切换的方法进行封装并在本地缓存保存，用于web系统主题切换。2.根据权利要求1所述的一种基于javaScript实现web系统主题切换的方法，其特征是所述实现主题色切换时，组件库来源为view
‑
design组件库，获得主题色变量@primary
‑
color，以tint、fade或shade方式修改所有主题相关的其他颜色变量，使所有主题相关的颜色依赖于主题色变量。3.根据权利要求1或2所述的一种基于javaScript实现web系统主题切换的方法，其特征是所述实现主题色切换时，通过webpack插件提取全局Less变量的颜色样式，根据主题色计算主题色系列色值，调用webpack
‑
theme
‑
color
‑
replacer的切换方法进行切换，切换后的颜色样式直接替换DOM中已有的颜色样式，生效。4.根据权利要求1所述的一种基于javaScript实现web系统主题切换的方法，其特征是所述实现字体大小调节时，根节点的字体设置在12px以上，用于浏览器监测字体变化，...

【专利技术属性】
技术研发人员：王胜举，肖建国，王小鹏，王素华，耿加宝，
申请(专利权)人：浪潮软件股份有限公司，
类型：发明
国别省市：