首页 > 建站教程 > 前端框架 >  Vue3 + ElementPlus 实现暗黑模式正文

Vue3 + ElementPlus 实现暗黑模式

通过 VueUse 中提供的 useDark, useToggle 方法进行实现

1、在 src/assets 中新建 dark.scss

@forward "element-plus/theme-chalk/src/dark/var.scss" with (
  $colors: (
    //这里定义在暗黑模式下 primary 的颜色,其他同理
    "primary": ("base": #ff0000),//默认 #409eff
  )
);
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;


2、安装 VueUse

安装 @vueuse/core 包 npm install @vueuse/core

@vueuse/core中文文档:https://www.vueusejs.com/


3、在 App.vue 中测试

<template>
  <div>
    <span @click.stop="toggleDark()">暗黑模式</span>
    <el-switch size="small" v-model="isDark" />
  </div>
</template>
<script setup>
import { useDark, useToggle } from "@vueuse/core";
const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>


4、效果展示

原始效果

Vue3 + ElementPlus 实现暗黑模式

暗黑模式

Vue3 + ElementPlus 实现暗黑模式