【技术实现步骤摘要】
本专利技术涉及web网页，尤其涉及一种可自定义前端页面主题颜色的方法和电子设备。
技术介绍
1、随着互联网的发展，用户对个性化体验的需求不断增加，希望能够根据自己的喜好、风格和偏好来定制网页的外观，使其与自己的品味相匹配。为满足用户的这一需求，网页换肤技术应运而生，网页换肤技术允许用户通过界面交互元素，如设置面板、选项菜单等选择自定义的主题色。用户可以通过调色板、色相滑块或输入色值等方式进行选择。一旦用户确认选择，网页换肤技术将触发相应的主题切换事件。在现有技术方案中，使用css样式表：通过创建多个css样式表，每个样式表文件中包含与相应主题颜色相关的样式规则，在html文件中引入默认样式表：在html文件的<head>部分，使用<link>标签引入默认主题颜色的样式表。这是页面加载时默认显示的样式表，通过javascript修改<link>标签的href属性，动态替换当前引入的样式表实现页面主题更改。
2、然而，现有技术方案，每个主题颜色都有自己的css样式表，导致样式表的冗余；当有多个主题颜色时，需要创建和维护多个独立的css样式表，在每个样式表中进行相应的修改，增加了开发和维护的复杂性；由于需要加载多个样式表文件，可能会导致页面加载时间延长；通过预定义多个主题颜色的方式，用户的定制性可能受到限制，只能选择预设的主题颜色，而不能自由地定义自己的主题颜色。
技术实现思路
1、有鉴于此，本专利技术提供了一种可自定义前端页面主题颜色的方
2、第一方面，本专利技术提供了一种可自定义前端页面主题颜色的方法，包括：
3、s1.获取用户自定义的页面主题颜色信息；所述页面主题颜色信息包括至少一种页面主题元素的颜色信息；
4、s2.响应于监听到的主题切换事件，所述主题切换事件携带用户自定义的所述页面主题颜色信息，基于所述页面主题颜色信息，修改css变量的值，并将修改后的css变量的值应用于对应的页面主题元素；
5、s3.更新前端页面中与修改后的css变量的值对应的页面主题元素的颜色。
6、进一步地，所述页面主题元素为文字、背景、按钮或页面边框。
7、进一步地，所述基于所述页面主题颜色信息，修改css变量的值，并将修改后的css变量的值应用于对应的页面主题元素，包括：
8、对于单个元素，基于所述页面主题颜色信息，采用元素内置方法修改css变量的值，并将修改后的css变量的值应用于对应的页面主题元素。
9、进一步地，所述基于所述页面主题颜色信息，修改css变量的值，并将修改后的css变量的值应用于对应的页面主题元素，还包括：
10、对于整体文档，基于所述页面主题颜色信息，采用文档内置方法修改css变量的值，并将修改后的css变量的值应用于全局范围，其中，全局范围是整体文档。
11、进一步地，所述获取用户自定义的页面主题颜色信息，包括：
12、通过用户界面上的交互元素获取用户自定义的所述页面主题颜色信息。
13、进一步地，所述方法还包括：
14、在通过用户界面上的交互元素获取用户自定义的所述页面主题颜色信息时，触发所述主题切换事件。
15、进一步地，在主题切换事件的切换过程中，显示加载指示器或提供切换成功的提示信息。
16、进一步地，在获取用户自定义的页面主题颜色信息之后，所述方法还包括：
17、将用户自定义的所述页面主题颜色信息存储至本地。
18、进一步地，所述方法还包括：
19、响应于前端页面重新加载或刷新，确定本地是否存储有用户自定义的所述页面主题颜色信息；
20、若否，则采用默认的页面主题颜色展示前端页面；
21、若是，则基于所述页面主题颜色信息，修改css变量的值，并将修改后的css变量的值应用于对应的页面主题元素，获得新的页面主题颜色，并采用新的页面主题颜色展示前端页面。
22、第二方面，本专利技术提供了一种计算机设备，包括存储器、处理器以及存储在所述存储器中并且可以在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如所述可自定义前端页面主题颜色的方法的步骤。
23、本专利技术与现有技术相比存在的有益效果是：
24、1.本专利技术通过使用css变量和内置方法，在不重新加载页面的情况下，能够实时响应用户的操作或改变，实现了在运行时动态更改元素的样式，避免了多次重新计算和渲染整个页面；
25、2.本法明通过在整体页面或特定的元素上进行样式的调整和定制，实现了css变量在多个元素和选择器中共享，并且在不同的css规则中使用；
26、3.本法明通过定义和使用css变量，将样式的重复部分抽象为变量，更轻松地应用相同的样式规则到多个元素或组件上，并且只需更改变量的值即可实现样式的统一调整，提高了样式的可重用性；
27、4.本法明的方法整体的主题切换效果，使得主题切换更加灵活和方便，减少了代码重复和维护的工作量，提高了页面的性能。
本文档来自技高网...【技术保护点】
1.一种可自定义前端页面主题颜色的方法，其特征在于，包括：
2.根据权利要求1所述的可自定义前端页面主题颜色的方法，其特征在于，所述页面主题元素为文字、背景、按钮或页面边框。
3.根据权利要求1所述的可自定义前端页面主题颜色的方法，其特征在于，所述基于所述页面主题颜色信息，修改CSS变量的值，并将修改后的CSS变量的值应用于对应的页面主题元素，包括：
4.根据权利要求3所述的可自定义前端页面主题颜色的方法，其特征在于，所述基于所述页面主题颜色信息，修改CSS变量的值，并将修改后的CSS变量的值应用于对应的页面主题元素，还包括：
5.根据权利要求1所述的可自定义前端页面主题颜色的方法，其特征在于，所述获取用户自定义的页面主题颜色信息，包括：
6.根据权利要求5所述的可自定义前端页面主题颜色的方法，其特征在于，所述方法还包括：
7.根据权利要求6所述的可自定义前端页面主题颜色的方法，其特征在于，在主题切换事件的切换过程中，显示加载指示器或提供切换成功的提示信息。
8.根据权利要求1所述的可自定义前端页
9.根据权利要求1所述的可自定义前端页面主题颜色的方法，其特征在于，所述方法还包括：
10.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并且可以在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至9中任一项所述可自定义前端页面主题颜色的方法的步骤。
...【技术特征摘要】
1.一种可自定义前端页面主题颜色的方法，其特征在于，包括：
2.根据权利要求1所述的可自定义前端页面主题颜色的方法，其特征在于，所述页面主题元素为文字、背景、按钮或页面边框。
3.根据权利要求1所述的可自定义前端页面主题颜色的方法，其特征在于，所述基于所述页面主题颜色信息，修改css变量的值，并将修改后的css变量的值应用于对应的页面主题元素，包括：
4.根据权利要求3所述的可自定义前端页面主题颜色的方法，其特征在于，所述基于所述页面主题颜色信息，修改css变量的值，并将修改后的css变量的值应用于对应的页面主题元素，还包括：
5.根据权利要求1所述的可自定义前端页面主题颜色的方法，其特征在于，所述获取用户自定义的页面主题颜色信息，包括：
<...【专利技术属性】
技术研发人员：蒋海，田勇超，
申请(专利权)人：布比北京网络技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。