Vue3 + Element-Plus 配置暗黑模式

1、准备工作 ( 安装 )

1. Element-plus 2.2.0版本组件全方面支持暗黑模式，所以我们需要安装2.2.0或更高版本。

npm install element-plus --save

2. vueUse 类似react中的hooks，其中useDark可以切换当前html的class为dark启用暗黑模式。

npm i @vueuse/core

2、使用useDark切换暗黑模式

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

const isDark = useDark()
const toggleDark = useToggle(isDark)

• 按以上方法引入useDark()方法获取状态isDark,使用useToggle()方法切换暗黑模式。
• 将toggleDark()绑定在需要切换的按钮上即可 例如：

<div>
  <button @click="toggleDark()">
    当前状态是: {{ isDark }}
  </button>
</div>

3、配置暗黑模式下的的css / scss 样式

• 新建一个自己的样式文件例如style/dark.scss 然后在html.dark中写入暗黑模式的样式例如：

html.dark {
  /* 自定义深色背景颜色 */
  --af-bg-color: #000000;
}

• 如果你正在使用vite，并且你想在按需导入时自定义主题,可以使用 scss.additionalData 来编译所有应用 scss 变量的组件 例如：

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'

// vite.config.ts
export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue()
  ],
})

• 如果没有使用vite的话，则在main.ts中引入你的css文件即可生效。

结尾

如果看了以上配置还没学会的话，可以去我这个项目看看具体代码。 点我查看