Element Plus＜2.2.0＞版本终于支持暗黑模式啦~

Element Plus<2.2.0>版本如何使用暗黑模式

官方链接说明

首先我们要确保我们的 Element Plus 版本在2.2.0+ 才可以使用哦

main.ts中多引入一个css

import 'element-plus/theme-chalk/dark/css-vars.css';

组件中使用

html

 <div class="toggle">
   <span @click.stop="toggleDark()">暗黑模式</span>
   <el-switch v-model="isDark" />
 </div>

js

import {
    
     useDark, useToggle } from '@vueuse/core';
const isDark = useDark();
const toggleDark = useToggle(isDark);

如果出现自己写的样式 无法自动生效的话可以在less/scss/css中自己写

我这里是新建了个文件夹专门写暗黑样式的less 然后在组件中 @import url …

//这下面的代码就是切换到暗黑模式下的样式 可自定义
@darkColor: #1d1e1f;
html.dark {
    
    
  .login {
    
    
    background: @darkColor;
  }
  .login-main h3{
    
    
    color: #fff;
  }
}

目前发现这个暗黑模式已经在本地的 localstorage 存储值了 可以保证持久化 刷新页面也不会改变 大家快去自己的项目中试试吧 具体改变 还请看官方链接 在顶部哦

希望此文章能帮助到你