【技术实现步骤摘要】
本专利技术涉及数据处理，具体涉及一种主题切换方法及装置。
技术介绍
1、web前端项目中开源组件库(element ui)被广泛应用，其中组件样式通过语法健壮样式表(scss)语言编写，并在theme-chalk包中统一管理。
2、在切换主题时，通用的主题切换方式为：通过切换超文本标记语言(html)的属性，引用不同的公共scss变量给层叠样式表(css)主题相关的属性赋值来实现换肤。但是，前述通用的切换方式需要定义多套scss样式变量，当scss样式变量过多时需要重复编写多份，文件打包体积较大且维护难度较高。
技术实现思路
1、有鉴于此，本专利技术实施例提供一种主题切换方法及装置，以解决通用的主题切换方式存在的文件打包体积较大且维护难度较高等问题。
2、为实现上述目的，本专利技术实施例提供如下技术方案：
3、本专利技术实施例第一方面公开一种主题切换方法，所述方法包括：
4、在检测到主题切换操作时，获取目标主题色值；
5、将前端项目的层叠样式表css文件中的原主题色值切换为所述目标主题色值，所述css文件基于主题来源文件生成，所述主题来源文件中的css属性或语法健壮样式表scss变量由公共样式文件中的scss主题样式变量进行赋值，所述主题来源文件至少包含二次封装组件库；
6、从所述公共样式文件中获取与所述目标主题色值对应的目标背景图片的资源定位符url；
7、根据所述目标背景图片的url，将所述前端
8、优选的，将前端项目的层叠样式表css文件中的原主题色值切换为所述目标主题色值，包括：
9、将所述目标主题色值作为主题色系切换语句的参数，执行所述主题色系切换语句将前端项目的层叠样式表css文件中的原主题色值切换为所述目标主题色值。
10、优选的，根据所述目标背景图片的url，将所述前端项目的原背景图片切换为所述目标背景图片，包括：
11、将所述目标背景图片的url赋值给scss的背景图片变量以将所述前端项目的原背景图片切换为所述目标背景图片。
12、优选的，将前端项目的层叠样式表css文件中的原主题色值切换为所述目标主题色值之后，还包括：
13、缓存所述目标主题色值。
14、优选的，缓存所述目标主题色值之后，还包括：
15、在检测到所述前端项目的页面刷新或重新打开时，将所述目标主题色值替换掉所述css文件中的原主题色值，及将所述前端项目的原背景图片切换为所述目标背景图片。
16、优选的，基于主题来源文件生成所述css文件的过程，包括：
17、将前端项目中的scss语句编译成css，并将所述css转换成webpack插件可识别的语句；
18、利用指定webpack插件处理所述webpack插件可识别的语句，并从所述主题来源文件中提取主题色系，生成css文件。
19、优选的，在检测到主题切换操作时，获取目标主题色值之前，还包括：
20、如果缓存中没有存储有目标主题色值，将默认主题色值存储到所述缓存中；
21、在检测到前端项目的页面刷新或重新打开时，将所述前端项目的css文件中的原主题色值切换为所述默认主题色值。
22、本专利技术实施例第二方面公开一种主题切换装置，所述装置包括：
23、第一获取单元，用于在检测到主题切换操作时，获取目标主题色值；
24、第一切换单元，用于将前端项目的层叠样式表css文件中的原主题色值切换为所述目标主题色值，所述css文件基于主题来源文件生成，所述主题来源文件中的css属性或语法健壮样式表scss变量由公共样式文件中的scss主题样式变量进行赋值，所述主题来源文件至少包含二次封装组件库；
25、第二获取单元，用于从所述公共样式文件中获取与所述目标主题色值对应的目标背景图片的资源定位符url；
26、第二切换单元，用于根据所述目标背景图片的url，将所述前端项目的原背景图片切换为所述目标背景图片。
27、优选的，所述第一切换单元具体用于：将所述目标主题色值作为主题色系切换语句的参数，执行所述主题色系切换语句将前端项目的层叠样式表css文件中的原主题色值切换为所述目标主题色值。
28、优选的，所述第二切换单元具体用于：将所述目标背景图片的url赋值给scss的背景图片变量以将所述前端项目的原背景图片切换为所述目标背景图片。
29、基于上述本专利技术实施例提供的一种主题切换方法及装置，该方法包括：在检测到主题切换操作时，获取目标主题色值；将前端项目的css文件中的原主题色值切换为目标主题色值，css文件基于主题来源文件生成，主题来源文件中的css属性或scss变量由公共样式文件中的scss主题样式变量进行赋值，主题来源文件至少包含二次封装组件库；从公共样式文件中获取与目标主题色值对应的目标背景图片的url；根据目标背景图片的url，将前端项目的原背景图片切换为目标背景图片。本方案中，通过公共样式文件统一管理和维护主题来源文件中的样式变量，降低维护难度；通过给scss样式变量动态赋值就能够实现主题色系和背景图片的切换，不需要引入多套scss样式变量，降低文件打包体积。
本文档来自技高网...【技术保护点】
1.一种主题切换方法，其特征在于，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，将前端项目的层叠样式表CSS文件中的原主题色值切换为所述目标主题色值，包括：
3.根据权利要求1所述的方法，其特征在于，根据所述目标背景图片的URL，将所述前端项目的原背景图片切换为所述目标背景图片，包括：
4.根据权利要求1-3中任一所述的方法，其特征在于，将前端项目的层叠样式表CSS文件中的原主题色值切换为所述目标主题色值之后，还包括：
5.根据权利要求4所述的方法，其特征在于，缓存所述目标主题色值之后，还包括：
6.根据权利要求1所述的方法，其特征在于，基于主题来源文件生成所述CSS文件的过程，包括：
7.根据权利要求1-3中任一所述的方法，其特征在于，在检测到主题切换操作时，获取目标主题色值之前，还包括：
8.一种主题切换装置，其特征在于，所述装置包括：
9.根据权利要求8所述的装置，其特征在于，所述第一切换单元具体用于：将所述目标主题色值作为主题色系切换语句的参数，执行所述主题色系切换
10.根据权利要求8所述的装置，其特征在于，所述第二切换单元具体用于：将所述目标背景图片的URL赋值给SCSS的背景图片变量以将所述前端项目的原背景图片切换为所述目标背景图片。
...【技术特征摘要】
1.一种主题切换方法，其特征在于，所述方法包括：
2.根据权利要求1所述的方法，其特征在于，将前端项目的层叠样式表css文件中的原主题色值切换为所述目标主题色值，包括：
3.根据权利要求1所述的方法，其特征在于，根据所述目标背景图片的url，将所述前端项目的原背景图片切换为所述目标背景图片，包括：
4.根据权利要求1-3中任一所述的方法，其特征在于，将前端项目的层叠样式表css文件中的原主题色值切换为所述目标主题色值之后，还包括：
5.根据权利要求4所述的方法，其特征在于，缓存所述目标主题色值之后，还包括：
6.根据权利要求1所述的方法，其特征在于，基于主题来源文...
【专利技术属性】
技术研发人员：叶澍，
申请(专利权)人：经纬恒润天津研究开发有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。