根据css3的:root实现项目的主题切换功能

在项目开发中,需要实现主题切换功能,然后使用css3的 :root 伪类和 var() 实现主题中引用不同颜色的。

1. 首先定义多个主题文件,里面定义对应的颜色变量

 

 

 

 2. 在main.js中根据当前的主题颜色,引用对应的scss主题文件。(ps:每次主题更换都将主题的值暂存在sessionStorage)

 

 

提示:使用 require引用文件时,require的路径一定要清晰,不可以包含变量,不然打包会有问题:

 

 这就是require路径包含变量,打包后会发现2份主题都引入了,就无法实现主题的切换。不过可以使用不同类名如【.root-green、.root-blue】来控制,实现主题的切换,但element-ui的主题就切换不了。

所以根本还是注意路径不要包含变量

 

 

 

 

 3. 在main.js中引用了对应的主题文件后,在开发中需要某个颜色,则使用 【var(颜色变量)】

 

最后效果:

 

 

 

posted @   蛙仔  阅读(671)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示