使用element-plus的暗黑模式

1.界面中加入el-switch

<el-switch v-model="isDark" :active-action-icon="Sunny" :inactive-action-icon="Moon" />

2.导入模块

import { useDark, useToggle } from '@vueuse/core'

import { Sunny, Moon } from '@element-plus/icons-vue'

3.定义方法

const isDark = useDark()

4.至此暗黑模式就生效了

下面是完整的代码

<template>
	<div class="header">
  
		<div class="header-right">
			<div class="header-user-con">
 
				<!-- 用户头像 -->
				<el-switch v-model="isDark" :active-action-icon="Sunny" :inactive-action-icon="Moon" /> 
				<el-avatar class="user-avator" :size="30" :src="imgurl" />
				<!-- 用户名下拉菜单 -->
				<el-dropdown class="user-name" trigger="click" @command="handleCommand">
					<span class="el-dropdown-link">
						{{ username }}
						<el-icon class="el-icon--right">
							<arrow-down />
						</el-icon>
					</span>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item command="user">个人中心</el-dropdown-item>
							<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
							<el-dropdown-item divided command="fullscreen">全屏</el-dropdown-item>
						</el-dropdown-menu>

					</template>
				</el-dropdown>
	 
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useSidebarStore } from '../store/sidebar';
import { useRouter } from 'vue-router';

import imgurl from '../assets/img/img.jpg';
import screenfull from 'screenfull';

import { getMyConfig, getMyPageConfig, MyGlobalFun, SetMySystemConfig } from '../globalFun';
import { global_PageParam } from '../globalconst';
import { useDark, useToggle } from '@vueuse/core'
import { Sunny, Moon } from '@element-plus/icons-vue' 
const isDark = useDark() 

let CurrentLanguage = ref<any>('')
const username: string | null = localStorage.getItem('ms_username');
  
const sidebar = useSidebarStore();
// 侧边栏折叠
const collapseChage = () => {
	sidebar.handleCollapse();
}; 

const jsonObject = getMyPageConfig();
 
onMounted(() => {
 
});
 
 
</script>
<style scoped>
.header {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 70px;
	font-size: 22px;
	color: #fff;
}

.collapse-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	float: left;
	padding: 0 21px;
	cursor: pointer;
}

.header .logo {
	float: left;
	width: 350px;
	line-height: 70px;
}

.header-right {
	float: right;
	padding-right: 50px;
}

.header-user-con {
	display: flex;
	height: 70px;
	align-items: center;
}

.btn-fullscreen {
	transform: rotate(45deg);
	margin-right: 5px;
	font-size: 24px;
}
 
 
 
</style>