![](https://img-blog.csdnimg.cn/direct/3679ae8bafaf439c8a7331a2ebe117af.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
业务
文章平均质量分 86
前端常见业务,例如:项目全局色值切换,皮肤变换
小马甲丫
不要假装很努力,选择比努力重要
展开
-
基于css-vars-ponyfill实现换肤
自定义变量颜色:对于业务来说,可能基础色并不能满足所有业务的颜色覆盖,或者每种主题下基础色并不能一一对应,此时自定义变量颜色,这个功能变得必不可少。主要原理也是根据每种主题可以自己填写对应的业务需要的颜色(极端情况),这边也分以下两种情景:(1)完全自定义常量多态,即一种主题色自定义常量都有对应一种颜色例如 系统主题有四种,某个业务背景色,我们定义了一个常量dark1主题下的颜色是一个基础色dark.C01;dark2主题下的颜色是一个基础色dark.C02;light1主题下的颜色是一个基础色。原创 2024-02-10 12:00:00 · 1449 阅读 · 1 评论 -
主题色变量和var实现多套主题换肤
前端换肤有2种,一种是定义好多套主题的换肤,另一种是随意配置主题色换肤。而且很多是使用UI库提供的变色方案,本片文章是纯主题色变量和var一起使用实现换肤效果。以下2定义根伪类 :root,代码第2和7行。分别定义了默认和带参数的伪类;定义 CSS变量,变量名需要以两个减号(--)开始;多主题的话就添加多个带参数的伪类,例如等等;/* 默认 */:root {/* 带参数 myTheme02 */本人每篇文章都是一字一句码出来,希望大佬们多提提意见。创作不易,给我打打气,加加油☕。原创 2023-12-05 00:01:45 · 573 阅读 · 0 评论 -
Vue+ElementUI实现在线动态换肤
实现的原理:版本之后所有的样式都是基于SCSS编写的,所有的颜色都是基于几个基础颜色变量来设置的,所以就不难实现动态换肤了,只要找到那几个颜色变量修改它就可以了。首先我们需要拿到通过拿到element-ui的版本号,根据该版本号去请求相应的样式。拿到样式之后将样色,通过正则匹配和替换,将颜色变量替换成你需要的,之后动态添加style标签来覆盖原有的css样式。原创 2023-10-24 09:00:00 · 1058 阅读 · 10 评论 -
Vue+ElementUI实现多套主题换肤
本地存放多套主题,两者有不同的命名空间,如写两套主题,一套叫day theme,一套叫主题都在一个的命名空间下,我们动态的在body上。原创 2023-10-23 09:00:00 · 1740 阅读 · 0 评论