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

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

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


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

技术介绍

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

技术实现思路

[0003]本专利技术针对现有技术的问题，提供一种基于javaScript实现web系统主题切换的方法，本专利技术提出的具体方案是：
[0004]本专利技术提供一种基于javaScript实现web系统主题切换的方法，基于javaScript，针对前端web系统主题分别实现主题色切换、字体大小调节和字体风格切换，
[0005]其中实现主题色切换时，先处理主题色切换的颜色来源，颜色来源包括组件库来源、公共样式来源和内部样式来源，针对组件库来源，从组件库的样式库中本文档来自技高网...

【技术保护点】

【技术特征摘要】
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以上，用于浏览器监测字体变化，...

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