一种基于angular框架的系统主题色的自定义方法及系统技术方案

本发明专利技术涉及页面渲染技术领域，具体为一种基于angular框架的系统主题色的自定义方法包括以下步骤，写一个web页面改变主题色的弹窗；引入ngx

【技术实现步骤摘要】
一种基于angular框架的系统主题色的自定义方法及系统


[0001]本专利技术涉及页面渲染
，具体为一种基于angular框架的系统主题色的自定义方法及系统。

技术介绍

[0002]随着一个系统功能的日益增多和完善，以及系统用户量的增大，有时系统的主题色需要搭配对应的特殊场景，有时需要满足用户的喜好、个人审美等情况。为了保证用户有一个良好的系统使用体验与感官享受，因此就需要根据当前系统的主题色情况不断的更改合适的主题配色。
[0003]现有技术中，目前的系统主题色的更换方法主要有以下两种：
[0004](1)设计人员根据用户场景重新设计合适的主题配色，再由研发人员将重新设计的颜色写入到系统样式中。
[0005]这种更改主题色方法的缺点是无法在系统中直接更换主题颜色，在场景需求多、用户量较大的情况下比较费时、费力，难以在有限的人力与时间限制内完成系统主题色的更改。
[0006](2)根据用户场景的需要，只预定义了几个固定的主题色，用户只能在已有的颜色中选择一个使用，不能根据自己的喜好设置自己想要的主题色。
[0007]这种更改主题色的方法比第一种方法要好一些，有一定的自主性，但是从用户交互性上来说还是比较差，因此，我们需要寻找更加灵活地更改系统主题色的方法。

技术实现思路

[0008]本专利技术的目的在于提供一种基于ANGULAR框架的系统主题色的自定义方法及系统，以解决上述
技术介绍
中提出的主题色更换耗时、耗力，不能及时响应用户及场景个性化需求的问题。r/>[0009]为实现上述目的，本专利技术提供如下技术方案：一种基于angular框架的系统主题色的自定义方法，所述基于angular框架的系统主题色的自定义方法包括以下步骤：
[0010]写一个web页面改变主题色的弹窗；
[0011]引入ngx
‑
color
‑
picker使用颜色选择器；
[0012]输入框和颜色选择器进行组件的封装，然后在需要调用的界面引入；
[0013]引入css
‑
vars
‑
ponyfill改变css变量，引入后在angular.json中引入js文件；
[0014]在css样式中使用该css变量，修改css样式；
[0015]把选择的主题色在本地缓存一下，刷新后页面调用本地缓存的主题色。
[0016]优选的，弹窗使用的是遵循Ant Design设计规范的Angular UI组件库ng
‑
zorro
‑
antd中的nz
‑
modal对话框。
[0017]优选的，在输入框中使用颜色选择器，用户点击输入框时，颜色选择器会出现；在输入框输入自己想要的颜色，在颜色选择器上定位到自己输入的颜色。
[0018]优选的，引入js文件后，在修改主题色的事件中，通过js操作改变css变量。
[0019]一种基于ANGULAR框架的系统主题色的自定义系统，该系统由弹窗模块、颜色选择器、组件封装模块、转换模块、修改模块以及缓存模块构成；
[0020]弹窗模块，用于写一个web页面改变主题色的弹窗；
[0021]颜色选择器，用于引入ngx
‑
color
‑
picker使用颜色选择器；
[0022]组件封装模块，用于输入框和颜色选择器进行组件的封装，然后在需要调用的界面引入；
[0023]转换模块，用于引入css
‑
vars
‑
ponyfill改变css变量，引入后在angular.json中引入js文件；
[0024]修改模块，用于在css样式中使用该css变量，修改css样式；
[0025]缓存模块，用于把选择的主题色在本地缓存一下，刷新后页面调用本地缓存的主题色。
[0026]优选的，所述弹窗模块中，弹窗使用的是遵循Ant Design设计规范的Angular UI组件库ng
‑
zorro
‑
antd中的nz
‑
modal对话框。
[0027]优选的，所述组件封装模块中，在输入框中使用颜色选择器，用户点击输入框时，颜色选择器会出现；在输入框输入自己想要的颜色，在颜色选择器上定位到自己输入的颜色。
[0028]优选的，所述转换模块中，引入js文件后，在修改主题色的事件中，通过js操作改变css变量。
[0029]与现有技术相比，本专利技术的有益效果是：
[0030]本专利技术提出的基于angular框架的系统主题色的自定义方法及系统代码简单，实现了能根据用户喜好、场景需求及时做出适合环境的主题配色，以多样化选择方式的对最终生成的场景进行配色，提高了优化效率，及时响应了场景个性化需求的问题，保证了用户的良好体验，并减少资源消耗，能以有限的人力，短时间内改变系统的主题。
附图说明
[0031]图1为web页面改变主题色的弹窗界面图；
[0032]图2为颜色选择器界面图；
[0033]图3为输入框、颜色选择器代码图；
[0034]图4为angular.json引入js文件的代码图；
[0035]图5为js改变css变量的代码；
[0036]图6为改变css样式的代码图；
[0037]图7为localStorage缓存存储主题色的代码图；
[0038]图8为从localStorage缓存取出本地存储主题色代码图；
[0039]图9为本专利技术自定义方法流程图。
具体实施方式
[0040]为了使本专利技术的目的、技术方案进行清楚、完整地描述，及优点更加清楚明白，以下结合附图对本专利技术实施例进行进一步详细说明。应当理解，此处所描述的具体实施例是
本专利技术一部分实施例，而不是全部的实施例，仅仅用以解释本专利技术实施例，并不用于限定本专利技术实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。
[0041]在本专利技术的描述中，需要说明的是，术语“中心”、“中”、“上”、“下”、“左”、“右”、“内”、“外”、“顶”、“底”、“侧”、“竖直”、“水平”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本专利技术和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位、以特定的方位构造和操作，因此不能理解为对本专利技术的限制。此外，术语“一”、“第一”、“第二”、“第三”、“第四”、“第五”、“第六”仅用于描述目的，而不能理解为指示或暗示相对重要性。
[0042]在本专利技术的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于angular框架的系统主题色的自定义方法，其特征在于：所述基于ANGULAR框架的系统主题色的自定义方法包括以下步骤：写一个web页面改变主题色的弹窗；引入ngx
‑
color
‑
picker使用颜色选择器；输入框和颜色选择器进行组件的封装，然后在需要调用的界面引入；引入css
‑
vars
‑
ponyfill改变css变量，引入后在angular.json中引入js文件；在css样式中使用该css变量，修改css样式；把选择的主题色在本地缓存一下，刷新后页面调用本地缓存的主题色。2.根据权利要求1所述的一种基于angular框架的系统主题色的自定义方法，其特征在于：弹窗使用的是遵循Ant Design设计规范的Angular UI组件库ng
‑
zorro
‑
antd中的nz
‑
modal对话框。3.根据权利要求2所述的一种基于angular框架的系统主题色的自定义方法，其特征在于：在输入框中使用颜色选择器，用户点击输入框时，颜色选择器会出现；在输入框输入自己想要的颜色，在颜色选择器上定位到自己输入的颜色。4.根据权利要求1所述的一种基于angular框架的系统主题色的自定义方法，其特征在于：引入js文件后，在修改主题色的事件中，通过js操作改变css变量。5.一种如上述权利要求1
‑
4任意一项所述的基于angular框架的系统主题色的自定义系统...

【专利技术属性】
技术研发人员：郑森红，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：