useColorMode 实现黑白主题切换

<template>
  <el-config-provider :size="assemblySize">
    <RouterView />
  </el-config-provider>
</template>
<script setup lang="ts">
import { onMounted, watch, computed } from "vue";
import { RouterView } from "vue-router";
import { useTheme } from "@/hook/useTheme";
import { useColorMode } from "@vueuse/core";
import { useGlobalStore } from "@/stores/modules/global";

const globalStore = useGlobalStore();

const mode = useColorMode();
const assemblySize = computed(() => globalStore.assemblySize);

watch(
  () => globalStore.isDark,
  (n: boolean) => {
    mode.value = n ? "dark" : "light";
  }
);
</script>

<style scoped></style>

给两套黑白主题

/* 自定义黑白主题 */
html.light {
  --el-menu-bg-color: #ffffff;
  --el-aside-border-color: #e4e7ed;
  --el-aside-logo-text-color: #303133;
  --el-header-logo-text-color: #303133;

  --el-header-bg-color: #ffffff;
  --el-header-text-color: #303133;
  --el-header-text-color-regular: #606266;
  --el-header-border-color: #e4e7ed;
  --el-bg-color-page: #fff;
}

html.dark {
  --el-menu-bg-color: #141414;
  --el-aside-border-color: #414243;
  /* 标题-文本(aside) */
  --el-aside-logo-text-color: #dadada;
  /* 标题-文本(header) */
  --el-header-logo-text-color: #dadada;

  --el-header-border-color: #414243;
  --el-header-bg-color: #141414;
  /* 面包屑-文本*/
  --el-header-text-color: #e5eaf3;
  /* 面包屑-最后一个文本颜色 */
  --el-header-text-color-regular: #cfd3dc;
  --el-bg-color-page: #141414;
}

使用 background-color: var(--el-menu-bg-color);

这样通过mode的设置'dark' 'light'实现不同主题css变量的使用。从而实现主题的切换