Vue3 实战：切换白天黑夜（暗黑模式）组件封装

Vue3 实战：切换白天黑夜（暗黑模式）组件封装

引用

CSDN

1.

https://blog.csdn.net/weixin_41192489/article/details/143788859

效果预览

原理解析

• 切换为暗黑模式时，会在 html 标签上添加样式类 dark
• 导入 ElementPlus 的暗黑模式样式后， ElementPlus 组件会自动响应暗黑模式
• 自定义组件需用 UnoCSS 的 dark: 语法自定义暗黑模式的样式

代码实现

vue3 + vite + ElementPlus + UnoCSS

src/main.ts

// 导入 ElementPlus 暗黑模式的样式
import 'element-plus/theme-chalk/dark/css-vars.css'

组件封装

src/components/DarkMode.vue

<script setup lang="tsx">
const isDark = ref(false)

const Sunny = () => <div class="i-noto:sun w-1em h-1em"></div>
const Moon = () => <div class="i-icon-park:moon w-1em h-1em"></div>

function toggleMode(flag: boolean) {
  if (flag) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }
}
watch(
  [isDark],
  () => {
    nextTick(() => {
      toggleMode(isDark.value)
    })
  },
  {
    immediate: true
  }
)
</script>

<template>
  <el-switch
    style="--el-switch-on-color: #333"
    v-model="isDark"
    :active-action-icon="Moon"
    :inactive-action-icon="Sunny"
  >
  </el-switch>
</template>

页面使用

<template>
  <div class="p4">
    <DarkMode />
    <div>
      <el-button>element plus 按钮</el-button>
    </div>

    <div class="bg-red dark:bg-white dark:color-red border w-10 mt-3">按钮</div>
  </div>
</template>