一种WEB前端主题模式的切换方法、设备及介质技术

本申请公开了一种WEB前端主题模式的切换方法、设备及介质，用以解决现有的主题模式切换方法组件样式编辑工作量较大、成本较高的技术问题。方法包括：接收用户发起的WEB前端主题模式切换请求，并确定WEB前端主题模式切换请求中待切换主题模式对应的主题Class；确定WEB前端页面由当前主题模式切换至待切换主题模式对应的若干个CSS变量；基于JavaScript调用待切换主题模式对应的主题Class，并通过主题Class调用预先定义的CSS函数；将若干个CSS变量基于实参的形式赋值至预先定义的CSS函数中，以在WEB前端页面中对待切换主题模式进行渲染，实现主题模式切换，加快了主题模式切换渲染速度，使切换方式更加便捷，降低了切换成本。本。本。

【技术实现步骤摘要】
一种WEB前端主题模式的切换方法、设备及介质


[0001]本申请涉及WEB前端
，尤其涉及一种WEB前端主题模式的切换方法、设备及介质。

技术介绍

[0002]WEB前端伴随着Angular，Vue和React等一些框架的出现，开发方式逐渐发生了日新月异的变化。组件方面从早期的微软Asp.Net的服务器渲染组件、JAVA体系的JSP模板控件，到基于Jquery的众多框架(EasyUI、JqueryUI)组件，ExtJS，Dojo等等。虽然这些前端组件(或者叫做框架)层出不穷，但其基本思想是一致的，都是对浏览器端的Dom进行操作或者操作的优化。在前端工程化开发大规模推广的情况下，现在的新框架和之前的以jquery为主的前端开发模式已经不是一个级别的了。一个信息系统软件开发团队人员的组成，尤其能看出这点，前端工程师越来越多，而且对前端的依赖越来越大。一个网站或者一个前端项目的主题切换功能实现，似乎对前端开发又造成了很大的困扰。目前，现有的WEB前端主题模式切换主要是通过CSS、LESS等文件，对项目中用到的所有DOM元素以及组件分别定义对应的本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种WEB前端主题模式的切换方法，其特征在于，所述方法包括：接收用户发起的WEB前端主题模式切换请求，并确定所述WEB前端主题模式切换请求中待切换主题模式对应的主题Class；确定WEB前端页面由当前主题模式切换至所述待切换主题模式对应的若干个CSS变量；基于JavaScript调用所述待切换主题模式对应的主题Class，并通过所述主题Class调用预先定义的CSS函数；将所述若干个CSS变量基于实参的形式赋值至所述预先定义的CSS函数中，以在所述WEB前端页面中对所述待切换主题模式进行渲染，实现主题模式切换。2.根据权利要求1所述的一种WEB前端主题模式的切换方法，其特征在于，所述接收用户发起的WEB前端主题模式切换请求，并确定所述WEB前端主题模式切换请求中待切换主题模式对应的主题Class之前，所述方法还包括：获取WEB前端页面body中的DOM元素，并根据获取到的所述DOM元素，确定出所述WEB前端页面中所有需要修改颜色的Class类；所述DOM元素中包含所述WEB前端页面中的所有页面内容；设置WEB前端切换主题模式对应的CSS函数，并在所述CSS函数中定义所述WEB前端页面中所有需要修改颜色的Class类。3.根据权利要求2所述的一种WEB前端主题模式的切换方法，其特征在于，所述在所述CSS函数中定义所述WEB前端页面中所有需要修改颜色的Class类之后，所述方法还包括：在定义的所述CSS函数中，将主题模式对应的若干个CSS变量，基于形参的形式赋值至所述WEB前端页面的DOM元素对应的Class类中。4.根据权利要求2所述的一种WEB前端主题模式的切换方法，其特征在于，所述设置WEB前端切换主题模式对应的CSS函数，具体包括：在所述WEB前端页面body中，确定出所述DOM元素所在的DOM节点，并在所述DOM节点上，设置WEB前端切换主题模式对应的CSS函数。5.根据权利要求1所述的一种WEB前端主题模式的切换方法，其特征在于，所述接收用户发起的WEB前端主题模式切换请求，并确定所述WEB前端主题模式切换请求中待切换主题模式对应的主题Class之前，所述方法还包括：确定出WEB前端页面对应的若干种可切换主题模式，并在所述WEB前端页面中，根据所述对应的若干种可切换模式，分别定义每种可切换主题模式对应的主题Class。6.根据权利要求1所述的一种WEB前端主题模式的切换方法，其特征在于，所述接收用户发起的WEB前端主题模式切换请求，并确定所述WEB前端主题模式切换请求中待切换主题模式对应的主题Class，具体包括：基于用户发起的点击事件，接收用户发送的WE...

【专利技术属性】
技术研发人员：周佳佳，
申请(专利权)人：浪潮通用软件有限公司，
类型：发明
国别省市：