element-plus主题换色

提示：暂未完善全，仅仅提供思路；不推荐

推荐使用该链接方式实现换色

主题方式是通过切换主题的方式实现换色
原因：
1.可以改css变量，但是没法改原页面class的样式（或许我没想到如何换，这是最大问题）
2.而且light和dark的主题色都需要全部声明；相同的变量如果只在一个主题里声明，会导致另一个主题里的样式不变
但是该方式的确实简单

---

一、步骤

1.新增theme切换逻辑
src/utils/theme.js

import { ref, onMounted } from 'vue'
import { useCssVar } from '@vueuse/core'// 定义主题配置
const themes = {light: {'--my-css-wbg': '#fff',// Element Plus 主色'--el-color-primary': '#007d7b','--el-color-success': '#8bc34a','--el-color-warning': '#ffc107','--el-color-danger': '#f56c6c','--el-color-error': '#ff5722','--el-color-info': '#909399','color-scheme': 'light','--el-color-white': '#ffffff','--el-color-black': '#333','--el-color-primary-light-3': '#4da4a3','--el-color-primary-light-5': '#80bebd', // hover效果'--el-color-primary-light-7': '#b3d8d7','--el-color-primary-light-8': '#cce5e5','--el-color-primary-light-9': '#e6f2f2','--el-color-primary-dark-2': '#0a6e6d','--el-color-success-light-3': '#aed580','--el-color-success-light-5': '#c5e1a5','--el-color-success-light-7': '#dcedc9','--el-color-success-light-8': '#e8f3db','--el-color-success-light-9': '#f3f9ed','--el-color-success-dark-2': '#79a645','--el-color-warning-light-3': '#ffd451','--el-color-warning-light-5': '#ffe083','--el-color-warning-light-7': '#ffecb5','--el-color-warning-light-8': '#fff3cd','--el-color-warning-light-9': '#fff9e6','--el-color-warning-dark-2': '#d6a510','--el-color-danger-light-3': '#f89898','--el-color-danger-light-5': '#fab6b6','--el-color-danger-light-7': '#fcd3d3','--el-color-danger-light-8': '#fde2e2','--el-color-danger-light-9': '#fef0f0','--el-color-danger-dark-2': '#ce6161','--el-color-error-light-3': '#ff8964','--el-color-error-light-5': '#ffab91','--el-color-error-light-7': '#ffcdbd','--el-color-error-light-8': '#ffddd3','--el-color-error-light-9': '#ffeee9','--el-color-error-dark-2': '#d65025','--el-color-info-light-3': '#b1b3b8','--el-color-info-light-5': '#c8c9cc','--el-color-info-light-7': '#dedfe0','--el-color-info-light-8': '#e9e9eb','--el-color-info-light-9': '#f4f4f5','--el-color-info-dark-2': '#7d8085','--el-bg-color': '#ffffff','--el-bg-color-page': '#f2f3f5','--el-bg-color-overlay': '#ffffff','--el-text-color-primary': '#303133','--el-text-color-regular': '#606266','--el-text-color-secondary': '#909399','--el-text-color-placeholder': '#a8abb2','--el-text-color-disabled': '#c0c4cc','--el-border-color': '#dcdfe6','--el-border-color-light': '#e4e7ed','--el-border-color-lighter': '#ebeef5','--el-border-color-extra-light': '#f2f6fc','--el-border-color-dark': '#d4d7de','--el-border-color-darker': '#cdd0d6','--el-fill-color': '#f0f2f5','--el-fill-color-light': '#f5f7fa','--el-fill-color-lighter': '#fafafa','--el-fill-color-extra-light': '#fafcff','--el-fill-color-dark': '#ebedf0','--el-fill-color-darker': '#e6e8eb','--el-fill-color-blank': '#ffffff','--el-box-shadow': '0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08)','--el-box-shadow-light': '0px 0px 12px rgba(0, 0, 0, .12)','--el-box-shadow-lighter': '0px 0px 6px rgba(0, 0, 0, .12)','--el-box-shadow-dark': '0px 16px 48px 16px rgba(0, 0, 0, .08), 0px 12px 32px rgba(0, 0, 0, .12), 0px 8px 16px -8px rgba(0, 0, 0, .16)','--el-disabled-bg-color': 'var(--el-fill-color-light)','--el-disabled-text-color': 'var(--el-text-color-placeholder)','--el-disabled-border-color': 'var(--el-border-color-light)','--el-overlay-color': 'rgba(0, 0, 0, .8)','--el-overlay-color-light': 'rgba(0, 0, 0, .7)','--el-overlay-color-lighter': 'rgba(0, 0, 0, .5)','--el-mask-color': 'rgba(255, 255, 255, .9)','--el-mask-color-extra-light': 'rgba(255, 255, 255, .3)','--el-border-width': '1px','--el-border-style': 'solid','--el-border-color-hover': 'var(--el-text-color-disabled)','--el-border': 'var(--el-border-width) var(--el-border-style) var(--el-border-color)','--el-svg-monochrome-grey': 'var(--el-border-color)','--aacc': 'var(--el-color-error-dark-2)', // 测试色'--vxe-primary-color': '#409EFF',        // Vxe-Table 主色'--vxe-ui-layout-background-color': '#ffffff','--vxe-ui-table-header-background-color': '#f8f8f9', // 表格头背景色'--vxe-ui-table-row-striped-background-color': '#fafafa','--vxe-ui-font-color': '#606266', // 表格字体颜色},dark: {'--my-css-wbg': '#223648',// Element Plus 主色'--el-color-primary': '#0084CB','--el-color-success': '#2BC667','--el-color-warning': '#f4c42d','--el-color-danger': '#F56C6C','--el-color-error': '#ff5722','--el-color-info': '#909399','color-scheme': 'dark','--el-color-white': '#ffffff','--el-color-black': '#333','--el-color-primary-light-3': '#4da9db','--el-color-primary-light-5': '#80c2e5','--el-color-primary-light-7': '#b3daef','--el-color-primary-light-8': '#cce6f5','--el-color-primary-light-9': '#e6f3fa','--el-color-primary-dark-2': '#006aa2','--el-color-success-light-3': '#6bd795','--el-color-success-light-5': '#95e3b3','--el-color-success-light-7': '#bfeed1','--el-color-success-light-8': '#d5f4e1','--el-color-success-light-9': '#eaf9f0','--el-color-success-dark-2': '#229e52','--el-color-warning-light-3': '#f7d66c','--el-color-warning-light-5': '#fae296','--el-color-warning-light-7': '#fcedc0','--el-color-warning-light-8': '#fdf3d5','--el-color-warning-light-9': '#fef9ea','--el-color-warning-dark-2': '#c39d24','--el-color-danger-light-3': '#f89898','--el-color-danger-light-5': '#fab6b6','--el-color-danger-light-7': '#fcd3d3','--el-color-danger-light-8': '#fde2e2','--el-color-danger-light-9': '#fef0f0','--el-color-danger-dark-2': '#c45656','--el-color-error-light-3': '#ff8964','--el-color-error-light-5': '#ffab91','--el-color-error-light-7': '#ffcdbd','--el-color-error-light-8': '#ffddd3','--el-color-error-light-9': '#ffeee9','--el-color-error-dark-2': '#cc461b','--el-color-info-light-3': '#b1b3b8','--el-color-info-light-5': '#c8c9cc','--el-color-info-light-7': '#dedfe0','--el-color-info-light-8': '#e9e9eb','--el-color-info-light-9': '#f4f4f5','--el-color-info-dark-2': '#7d8085','--el-bg-color': '#f1ff','--el-bg-color-page': '#f2f3f5','--el-bg-color-overlay': '#ffffff','--el-text-color-primary': '#303133','--el-text-color-regular': '#606266','--el-text-color-secondary': '#909399','--el-text-color-placeholder': '#a8abb2','--el-text-color-disabled': '#c0c4cc','--el-border-color': '#dcdfe6','--el-border-color-light': '#e4e7ed','--el-border-color-lighter': '#ebeef5','--el-border-color-extra-light': '#f2f6fc','--el-border-color-dark': '#d4d7de','--el-border-color-darker': '#cdd0d6','--el-fill-color': '#f0f2f5','--el-fill-color-light': '#f5f7fa','--el-fill-color-lighter': '#fafafa','--el-fill-color-extra-light': '#fafcff','--el-fill-color-dark': '#ebedf0','--el-fill-color-darker': '#e6e8eb','--el-fill-color-blank': '#ffffff','--el-box-shadow': '0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)','--el-box-shadow-light': '0px 0px 12px rgba(0, 0, 0, 0.12)','--el-box-shadow-lighter': '0px 0px 6px rgba(0, 0, 0, 0.12)','--el-box-shadow-dark': '0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16)','--el-disabled-bg-color': 'var(--el-fill-color-light)','--el-disabled-text-color': 'var(--el-text-color-placeholder)','--el-disabled-border-color': 'var(--el-border-color-light)','--el-overlay-color': 'rgba(0, 0, 0, 0.8)','--el-overlay-color-light': 'rgba(0, 0, 0, 0.7)','--el-overlay-color-lighter': 'rgba(0, 0, 0, 0.5)','--el-mask-color': 'rgba(255, 255, 255, 0.9)','--el-mask-color-extra-light': 'rgba(255, 255, 255, 0.3)','--el-border-width': '1px','--el-border-style': 'solid','--el-border-color-hover': 'var(--el-text-color-disabled)','--el-border': 'var(--el-border-width) var(--el-border-style) var(--el-border-color)','--el-svg-monochrome-grey': 'var(--el-border-color)','--vxe-primary-color': '#FF6B6B','--vxe-ui-layout-background-color': '#223648','--vxe-ui-table-header-background-color': '#20496e', // 表格头背景色'--vxe-ui-table-row-striped-background-color': '#243c52','--vxe-ui-font-color': '#ffffff', // 表格字体颜色}
}
export const currentTheme = ref((localStorage.getItem('app_theme')) || 'light'
)export function applyTheme(theme) {console.log('%c【' + 'theme' + '】打印', 'color:#fff;background:#0f0', theme)const root = document.documentElementObject.entries(themes[theme]).forEach(([key, value]) => {useCssVar(key, root).value = value})
}// 初始化时应用存储的主题
onMounted(() => {applyTheme(currentTheme.value)
})export function toggleTheme() {currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light'localStorage.setItem('app_theme', currentTheme.value)applyTheme(currentTheme.value)
}

2.使用

在导航栏位置使用

 <el-button @click="toggleTheme">{{ currentTheme === "light" ? "模式1" : "模式2" }}</el-button>import { toggleTheme, currentTheme, applyTheme } from '../utils/theme'applyTheme(localStorage.getItem('app_theme')) // 设置默认