vue3+elementplugs+原生css实现切换主题色

一般写在导航栏或者切换主题菜单内部，这里写在component组件下面的HeaderBar里面

<template><el-dropdown @command="handleThemeChange"><el-button size="small" icon="Refresh" class="theme-switch-btn">切换主题<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item command="light">浅色主题</el-dropdown-item><el-dropdown-item command="dark">深色主题</el-dropdown-item><el-dropdown-item command="blue">蓝色主题</el-dropdown-item><el-dropdown-item command="red">红色主题</el-dropdown-item></el-dropdown-menu></template></el-dropdown>
</template><script setup lang="ts">
import { ArrowDown, Refresh } from '@element-plus/icons-vue'
import { onMounted } from 'vue'// 处理主题切换
const handleThemeChange = (theme: string) => {// 移除所有主题类document.documentElement.classList.remove('theme-light', 'theme-dark', 'theme-blue', 'theme-red')// 添加选中的主题类document.documentElement.classList.add(`theme-${theme}`)// 保存主题偏好localStorage.setItem('app-theme', theme)
}// 初始化主题
onMounted(() => {const savedTheme = localStorage.getItem('app-theme') || 'light'document.documentElement.classList.add(`theme-${savedTheme}`)
})
</script><style scoped>
.theme-switch-btn {margin-right: 10px;
}
</style>

创建styles/theme.css

/* 基础变量 - 浅色主题作为默认主题 */
:root {/* 背景色 */--bg-color: #ffffff;--bg-secondary-color: #f5f7fa;--bg-tertiary-color: #eef2f7;/* 文本色 */--text-primary-color: #1d2129;--text-secondary-color: #4e5969;--text-tertiary-color: #86909c;/* 边框色 */--border-color: #dce1e8;/* 主题色 */--primary-color: #409eff;--primary-light-color: #e6f7ff;--primary-dark-color: #1890ff;/* 功能色 */--success-color: #52c41a;--warning-color: #faad14;--error-color: #ff4d4f;
}/* 深色主题 */
.theme-dark {/* 背景色 */--bg-color: #141414;--bg-secondary-color: #1f1f1f;--bg-tertiary-color: #2c2c2c;/* 文本色 */--text-primary-color: #f5f5f5;--text-secondary-color: #e0e0e0;--text-tertiary-color: #a0a0a0;/* 边框色 */--border-color: #383838;
}/* 蓝色主题 */
.theme-blue {/* 主题色 */--primary-color: #0066cc;--primary-light-color: #e0edff;--primary-dark-color: #0052a3;/* 调整部分背景色配合主题 */--bg-secondary-color: #f0f7ff;
}/* 红色主题 */
.theme-red {/* 主题色 */--primary-color: #cc0000;--primary-light-color: #ffe0e0;--primary-dark-color: #a30000;/* 调整部分背景色配合主题 */--bg-secondary-color: #fff0f0;
}/* 应用主题变量到Element Plus组件 */
:root,
.theme-light,
.theme-dark,
.theme-blue,
.theme-red {/* Element Plus 主题变量覆盖 */--el-color-primary: var(--primary-color);--el-color-primary-light-9: var(--primary-light-color);--el-color-primary-dark-2: var(--primary-dark-color);--el-bg-color: var(--bg-color);--el-bg-color-page: var(--bg-secondary-color);--el-bg-color-overlay: var(--bg-tertiary-color);--el-text-color-primary: var(--text-primary-color);--el-text-color-secondary: var(--text-secondary-color);--el-text-color-placeholder: var(--text-tertiary-color);--el-border-color: var(--border-color);--el-border-color-light: var(--border-color);
}

在main.js里面全局引入

import {createApp} from 'vue'
import App from './App.vue'
import router from "@/router/index.js";
import {createPinia} from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate"
import ElementPlus from "element-plus"
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// 引入主题样式
import './styles/theme.css'
const app = createApp(App)const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
app.use(pinia)
app.use(router)
app.use(ElementPlus, {locale: zhCn
})app.mount('#app')