useDark意思是否使用深色模式,useDark它是通过读取localStorage/sessionStorage的存储值(key 是可自定义的),从而设置html的class。从element-plus官网可以看到,它自带有暗黑主题,我们只需要在 html 上添加一个名为 dark 的类,所以选择使用useDark方便了许多。
![](https://img-blog.csdnimg.cn/img_convert/bfd45cd652e32d0dcdc0550066c6b35e.png)
除了引入elementPlus外,还要在main.js中引入:
![](https://img-blog.csdnimg.cn/img_convert/ff0904786c1a15b57fd8040bf7a09e69.png)
接下来就是在页面写具体的实现:
![](https://img-blog.csdnimg.cn/img_convert/d02e202864a4f4f46bf170c7bc5198b8.png)
![](https://img-blog.csdnimg.cn/img_convert/2a57302f4d5acf3ec546a4e00ec936b1.png)
效果:
![](https://img-blog.csdnimg.cn/img_convert/9fe3c9b600b467d373d33d9f0b7225de.png)
![](https://img-blog.csdnimg.cn/img_convert/3fa10e13269afbd92d351d39ad27c9ab.png)
useDark意思是否使用深色模式,useDark它是通过读取localStorage/sessionStorage的存储值(key 是可自定义的),从而设置html的class。从element-plus官网可以看到,它自带有暗黑主题,我们只需要在 html 上添加一个名为 dark 的类,所以选择使用useDark方便了许多。
除了引入elementPlus外,还要在main.js中引入:
接下来就是在页面写具体的实现:
效果: