(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210925510.4 (22)申请日 2022.08.03 (71)申请人 浪潮软件股份有限公司 地址 271000 山东省泰安市东 岳大街527号 浪潮科技园 (72)发明人 王胜举　肖建国　王小鹏　王素华　 耿加宝　 (74)专利代理 机构 济南信达专利事务所有限公 司 37100 专利代理师 孙晶伟 (51)Int.Cl. G06F 3/0482(2013.01) G06F 3/0483(2013.01) G06F 3/04842(2022.01) G06F 3/04845(2022.01)G06F 3/04847(2022.01) G06F 9/445(2018.01) (54)发明名称 一种基于javaScript实现web系统主题切换 的方法 (57)摘要 本发明公开一种基于javaScript实现web系 统主题切换的方法， 涉及系统前端管理技术领 域； 基于javaScript， 针对前端 web系统主题分别 实现主题色切换、 字体大小调节和字体风格切 换， 无需每增加一种主题就重新进行开发或配 置， 可以灵活配置主题色、 字体大小及字体风格， 以全局变量的形式应用于系统的各个页面中， 易 于拓展。 权利要求书2页 说明书7页 附图2页 CN 115390715 A 2022.11.25 CN 115390715 A 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系统主题切换的方法， 其特 征是所述实现主题色切换时， 通过web pack插件提取全局Less变量的颜色样式， 根据主题色 计算主题色系列色值， 调用webpack ‑theme‑color‑replacer的切换方法进行切换， 切换后 的颜色样式直接替换DOM中已有的颜色样式， 生效。 4.根据权利 要求1所述的一种基于javaScript实现web系统主题切换的方法， 其特征是 所述实现字体大小调节时， 根节点的字体 设置在12p x以上， 用于浏览器监测字体变化， 并相 应修改字体大小或元 素长度单位rem的比例。 5.根据权利 要求1所述的一种基于javaScript实现web系统主题切换的方法， 其特征是 针对同一域名的其他系统， 通过本地缓存 保存的实现主题色切换的方法与实现字体大小调 节和字体风格切换的方法进行web系统主题切换。 6.根据权利 要求1所述的一种基于javaScript实现web系统主题切换的方法， 其特征是 针对非一域名的其他系统， 根据实现主题色切换的方法与实现字体大小调节和字体风格切 换的方法定义页面的覆盖样式， 通过嵌入方法将覆盖样式组织为一个 style节点插入到DOM 中， 使覆盖样式在其 他系统中生效。 7.一种基于javaScript 实现web系统主题切换的系统， 其特征是包括主题色切换模块、 字体管理模块和样式封装 模块， 所述系统基于javaScript， 针对前端web系统主题分别实现主题色切换、 字体大小调节 和字体风格切换， 主题色切换模块实现主题色切换时， 先处理主题色切换的颜色来源， 颜色来源包括组 件库来源、 公共样式来源和内部样 式来源， 针对组件库来源， 从组件库的样式库中利用CSS权　利　要　求　书 1/2 页 2 CN 115390715 A 2预处理语言Less提取静态样式文件， 获取静态样式文件中Less变量的集合， 获得主题色变 量， 使所有 主题相关的颜色依赖 于主题色变量， 针对公共样式来源和内部样式来源的样式文件， 同样利用预处理语言Less修改， 使所 有主题相关的颜色依赖 于主题色变量， 所述主题色变量成为全局Less变量， 通过webpack插件提取全局Less变量的颜色样式， 以style标签的形式插 入到DOM中， 通过JS控制DOM中注入style的方式来切换颜色， 字体管理模块实现字体大小调节和字体风格切换时， 在DOM的根节点以px设置字体大 小， 定义根节 点的下一节 点body的默认字体值， 并在body设置全局的字体风格， 使字体大小 属性和字体风格属性供内部元素继承， 通过修改body中的相应属性值调节字体大小或修改 字体风格； 样式封装模块将实现主题色切换的方法与实现字体大小调节和字体风格切换的方法 进行封装并在本地缓存保存， 用于web系统主题切换。 8.一种基于javaScript 实现web系统主题切换的装置， 其特征是包括： 至少一个存储器 和至少一个处 理器； 所述至少一个存 储器， 用于存 储机器可读程序； 所述至少一个处理器， 用于调用所述机器可读程序， 执行权利要求1至6中任一项所述 的一种基于javaScript实现web系统主题切换的方法。权　利　要　求　书 2/2 页 3 CN 115390715 A 3