非你网

前边一篇说了 element-plus 覆盖主题色的操作。这边就要做多主题的处理。也就是除了默认的主题，还得增加一个暗黑主题。

https://element-plus.org/zh-CN/guide/dark-mode.html

Do

思路还是一样，覆盖主题（颜色，间距等）。

# 创建
touch assets/styles/element-dark.scss

@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
  $bg-color: (
    'page': #0a0a0a,
    '': #626aef,
    'overlay': #1d1e1f,
  ),
  $colors:(
    "primary": ("base": green),
  )
);

@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;

在 vite.config.ts 中引入。

    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/styles/element.scss";
          @use "@/assets/styles/element-dark.scss";
        `,
      },
    },

这样，样式就好了。可以手动在 html 节点加入 class="dark" 看看效果。发现背景颜色已经是黑色（#0a0a0a）了。

下一步

这里不直接在 html 节点加入类来实现暗黑主题。而是使用 useDark 来实现。

https://vueuse.org/core/useDark/

# 安装
pnpm add -D  @vueuse/core

在 homeview 中，通过函数来实现主题的自动切换。

# template 中增加以下代码
    <div>
      <span @click.stop="toggleDark()">暗黑模式</span>
      <el-switch size="small" v-model="isDark" />
    </div>

# script 中增加以下代码
import { useDark, useToggle } from '@vueuse/core'

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

这样，就可以通过点击 switch 来切换暗黑主题和白天主题（默认）的切换。效果如下。

当然，这里自定义的颜色偏少，可以去更多的定义颜色。以实现更丰富的主题。还有，刷新浏览器，这里会记录上一次的主题设置。

提交版本

git add .
git commit -m '安装 vueuse 增加暗黑主题的配置'

# 项目目前都是基础部件的构建，为了保持所有部件的最新，这里经常会更新
pnpm update