Element Plus 主题切换实现指南

1. 创建主题切换的状态管理

使用 Pinia 创建一个 store，用于管理主题状态。

import { defineStore } from 'pinia'

export const useThemeStore = defineStore('theme', {
  state: () => ({
    isDark: false
  }),
  actions: {
    toggleTheme() {
      this.isDark = !this.isDark
      // 切换 html 的类名来触发主题切换
      document.documentElement.className = this.isDark ? 'dark' : ''
    }
  },
  persist: true // 持久化存储主题设置
})

2. 在 App.vue 中初始化主题

在 onMounted 生命周期中，根据存储的主题状态设置 html 标签的类名。

<script setup lang="ts">
import { onMounted } from 'vue'
import { useThemeStore } from '@/stores/theme'

const themeStore = useThemeStore()

onMounted(() => {
  // 初始化主题
  document.documentElement.className = themeStore.isDark ? 'dark' : ''
})
</script>

3. 在组件中添加主题切换按钮

新建一个ThemeSwitch.vue的组件：

<template>
  <div class="theme-switch" @click="toggleTheme">
    <div class="switch-track" :class="{ 'is-dark': themeStore.isDark }">
      <el-icon class="icon sun"><Sunny /></el-icon>
      <el-icon class="icon moon"><Moon /></el-icon>
      <div class="switch-thumb"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useThemeStore } from '@/stores/theme'
import { Moon, Sunny } from '@element-plus/icons-vue'

const themeStore = useThemeStore()
const toggleTheme = () => {
  themeStore.toggleTheme()
}
</script>

<style scoped>
.theme-switch {
  cursor: pointer;
  padding: 2px;
  margin: 0 12px;
}

.switch-track {
  position: relative;
  width: 40px;
  height: 24px;
  background-color: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  transition: all 0.3s;
}

.switch-thumb {
  position: absolute;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: var(--el-color-white);
  border-radius: 50%;
  transition: all 0.3s;
  border: 1px solid var(--el-border-color);
  box-shadow: 0 2px 4px rgba(49, 47, 47, 0.1);
}

.switch-track.is-dark {
  .switch-thumb {
    transform: translateX(24px);
    background-color: #181616;
  }
}


.icon {
  position: relative;
  z-index: 1;
  font-size: 14px;
  opacity: 0.5;
  transition: all 0.3s;
}

.sun {
  margin-right: auto;
  color: var(--el-text-color-primary);
  opacity: 0;
}

.moon {
  margin-left: auto;
  color: var(--el-text-color-primary);
  opacity: 1;
}

.switch-track.is-dark {
  .sun {
    opacity: 1;
  }
  .moon {
    opacity: 0;
  }
}
</style>

4. 安装 pinia-plugin-persistedstate

为了支持持久化存储，需要安装 pinia-plugin-persistedstate。

npm install pinia-plugin-persistedstate

5. 在 main.ts 中配置 Pinia 持久化

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import App from './App.vue'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

const app = createApp(App)
app.use(pinia)
app.mount('#app')

6. 在需要使用主题切换的页面中引入 ThemeSwitch 组件

<template>
  <ThemeSwitch />
</template>

<script setup lang="ts">
import ThemeSwitch from '@/components/ThemeSwitch.vue'
</script>

7. 主题切换效果

Element Plus 会自动根据 html 标签上的 dark 类名来切换暗色主题。你可以在任何组件中使用 useThemeStore 来获取当前主题状态。

8. 自定义主题颜色

如果需要自定义主题颜色，可以参考 Element Plus 的主题配置文档，通过 CSS 变量覆盖默认的主题颜色。

:root {
  --el-color-primary: #409eff;
}
.dark {
  --el-color-primary: #1f2937;
}