(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211022307.2 (22)申请日 2022.08.25 (71)申请人 浪潮云信息技 术股份公司 地址 250100 山东省济南市高新区浪潮路 1036号浪潮科技园S01号楼 (72)发明人 郑森红　 (74)专利代理 机构 济南信达专利事务所有限公 司 37100 专利代理师 姜鹏 (51)Int.Cl. G06F 16/958(2019.01) G06F 9/48(2006.01) G06F 9/451(2018.01) G06F 3/0484(2022.01) (54)发明名称 一种基于angular框架的系统主题色的自定 义方法及系统 (57)摘要 本发明涉及页面渲染技术领域， 具体为一种 基于angu lar框架的系统主题色的自定义方法包 括以下步骤， 写一个web页面改变主题色的弹窗； 引入ngx‑color‑picker使用颜色选 择器； 输入框 和颜色选 择器进行组件的封装， 然后在需要调用 的界面引入； 引入css ‑vars‑ponyfill改变css变 量， 引入后在angular.json中引入js文件； 有益 效果为： 本发明提出的基于ANGULAR框架的系统 主题色的自定义方法及系统代码简单， 实现了能 根据用户喜好、 场景需求及时做出适合环境的主 题配色， 以多样化选择方式的对最终生成的场景 进行配色， 提高了优化效率， 及时响应了场景个 性化需求的问题， 保证了用户的良好体验， 并减 少资源消耗， 能以有限的人力， 短时间内改变系 统的主题。 权利要求书1页 说明书4页 附图4页 CN 115408636 A 2022.11.29 CN 115408636 A 1.一种基于angular框架的系统主题色的自定义方法， 其特征在于： 所述基于ANGULAR 框架的系统主题色的自定义方法包括以下步骤： 写一个web页面改变主题色的弹窗； 引入ngx‑color‑picker使用颜色选择器； 输入框和颜色选择器进行组件的封装， 然后在需要调用的界面引入； 引入css‑vars‑ponyfill改变css变量， 引入后在angular.jso n中引入js文件； 在css样式中使用该cs s变量， 修改cs s样式； 把选择的主题色在本地缓存一下， 刷新后页面调用本地缓存的主题色。 2.根据权利 要求1所述的一种基于angular框架的系统主题色的自定义方法， 其特征在 于： 弹窗使用的是遵循Ant  Design设计规范的Angular  UI组件库ng ‑zorro‑antd中的nz ‑ modal对话框 。 3.根据权利 要求2所述的一种基于angular框架的系统主题色的自定义方法， 其特征在 于： 在输入框中使用颜色选择器， 用户点击输入框时， 颜色选择器会出现； 在输入框输入自 己想要的颜色， 在颜色选择器上定位到自己输入的颜色。 4.根据权利 要求1所述的一种基于angular框架的系统主题色的自定义方法， 其特征在 于： 引入js文件后， 在修改主题色的事 件中， 通过js操作改变cs s变量。 5.一种如上述权利要求1 ‑4任意一项所述的基于angular框架的系 统主题色的自定义 系统， 其特征在于： 该系统由弹窗模块、 颜色选择器、 组件封装模块、 转换模块、 修改模块以 及缓存模块构成； 弹窗模块， 用于写一个web页面改变主题色的弹窗； 颜色选择器， 用于引入ngx ‑color‑picker使用颜色选择器； 组件封装模块， 用于输入框和颜色选择器进行组件的封装， 然后在需要调用的界面引 入； 转换模块， 用于引入css ‑vars‑ponyfill改变css变量， 引入后在angular.json中引入 js文件； 修改模块， 用于在cs s样式中使用该cs s变量， 修改cs s样式； 缓存模块， 用于把选择的主题色在本地缓存一下， 刷新后页面调用本地缓存的主题色。 6.根据权利 要求5所述的一种基于angular框架的系统主题色的自定义系统， 其特征在 于： 所述弹窗模块中， 弹窗使用的是遵循Ant  Design设计规范的Angular  UI组件库ng ‑ zorro‑antd中的nz ‑modal对话框 。 7.根据权利 要求6所述的一种基于angular框架的系统主题色的自定义系统， 其特征在 于： 所述组件封装模块中， 在输入框中使用颜色选择器， 用户点击输入框时， 颜色选择器会 出现； 在输入框 输入自己想要的颜色， 在颜色选择器上定位到自己输入的颜色。 8.根据权利 要求7所述的一种基于angular框架的系统主题色的自定义系统， 其特征在 于： 所述转换模块中， 引入js文件后， 在修改主题色的事 件中， 通过js操作改变cs s变量。权　利　要　求　书 1/1 页 2 CN 115408636 A 2一种基于a ngular框架的系统主题色的 自定义方法及系统 技术领域 [0001]本发明涉及页面渲染技术领域， 具体为一种基于angular框架的系统主题色的自 定义方法及系统。 背景技术 [0002]随着一个系统功能的日益增多和完善， 以及系统用户量的增大， 有时系统的主题 色需要搭配对应的特殊场景， 有时需要满足用户的喜好、 个人审美等情况。 为了保证用户有 一个良好的系统使用体验与感官享受， 因此就需要根据当前系统的主题色情况不断的更改 合适的主题配色。 [0003]现有技术中， 目前的系统主题色的更 换方法主要有以下两种： [0004](1)设计人员根据用户场景重新设计合适的主题配色， 再由研发人员将重新设计 的颜色写入到系统样式 中。 [0005]这种更改主题色方法的缺点是无法在系统中直接更换主题颜色， 在场景需求多、 用户量较大 的情况下比较费时、 费力， 难以在有限的人力与时间限制内完成系统主题色的 更改。 [0006](2)根据用户场景的需要， 只预定义了几个固定的主题色， 用户只能在已有的颜色 中选择一个使用， 不能根据自己的喜好设置自己想要的主题色。 [0007]这种更改主题色的方法比第一种方法要好一些， 有一定 的自主性， 但是从用户交 互性上来说还是比较差， 因此， 我们需要寻找更加灵活地更改系统主题色的方法。 发明内容 [0008]本发明的目的在于提供一种基于ANGULAR框架的系统主题色的自定义方法及系 统， 以解决上述背 景技术中提出的主题色更换耗时、 耗力， 不能及时响应用户及场景个性化 需求的问题。 [0009]为实现上述目的， 本 发明提供如下技术方案： 一种基于angular框架的系统主题色 的自定义方法， 所述基于angular框架的系统主题色的自定义方法包括以下步骤： [0010]写一个web页面改变主题色的弹窗； [0011]引入ngx‑color‑picker使用颜色选择器； [0012]输入框和颜色选择器进行组件的封装， 然后在需要调用的界面引入； [0013]引入css‑vars‑ponyfill改变css变量， 引入后在angular.jso n中引入js文件； [0014]在css样式中使用该cs s变量， 修改cs s样式； [0015]把选择的主题色在本地缓存一下， 刷新后页面调用本地缓存的主题色。 [0016]优选的， 弹窗使用的是遵循Ant  Design设计规范的Angular  UI组件库ng ‑zorro‑ antd中的nz ‑modal对话框 。 [0017]优选的， 在输入框中使用颜色选择器， 用户点击输入框时， 颜色选择器会出现； 在 输入框输入自己想要的颜色， 在颜色选择器上定位到自己输入的颜色。说　明　书 1/4 页 3 CN 115408636 A 3