A versão <2.2.0> do Element Plus finalmente suporta o modo escuro~

Como usar o modo escuro no Element Plus <2.2.0>

Descrição oficial do link

Em primeiro lugar, precisamos garantir que nossa versão Element Plus possa ser usada apenas em 2.2.0+

Introduzir mais um css em main.ts

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

usado no componente

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);

Se o estilo escrito por você não puder entrar em vigor automaticamente, você mesmo pode escrevê-lo em less/scss/css

Eu criei uma nova pasta aqui para escrever menos no estilo escuro e então @import url no componente...

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

No momento, descobriu-se que este modo escuro foi armazenado no localstorage local para garantir que a página de atualização persistente não seja alterada. Acesse seu próprio projeto e experimente. Para alterações específicas, consulte o link oficial na parte superior .

Espero que este artigo possa ajudá-lo