vue3 主題模式 結合 element-plus的主題

 npm i element-plus --save-dev

在 Vue 3 中，實現主題模式主要有以下幾種方式

1.使用 CSS 變量（自定義屬性）

• CSS 變量是一種在 CSS 中定義可重用值的方式。在主題模式中，可以將顏色、字體大小等樣式屬性設置為 CSS 變量。然后通過 JavaScript 或 Vue 的響應式特性來切換這些變量的值，從而實現主題的切換

var.css
:root {--login-bg-color: #293146;  --left-menu-max-width: 200px;--left-menu-min-width: 64px;--left-menu-bg-color: #001529;--left-menu-bg-light-color: #0f2438;--left-menu-bg-active-color: var(--el-color-primary);--left-menu-text-color: #bfcbd9;--left-menu-text-active-color: #fff;--left-menu-collapse-bg-active-color: var(--el-color-primary);--logo-height: 50px;--logo-title-text-color: #fff;--top-header-bg-color: '#fff';--top-header-text-color: 'inherit';--top-header-hover-color: #f6f6f6;--top-tool-height: var(--logo-height);  --top-tool-p-x: 0;--tags-view-height: 35px;--tab-menu-max-width: 80px;--tab-menu-min-width: 30px;--tab-menu-collapse-height: 36px;   }.dark {--app-content-bg-color: var(--el-bg-color);}html,body {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}*,:after,:before {margin: 0;padding: 0;box-sizing: border-box;}

index.scss
@use './var.css';
@use 'element-plus/theme-chalk/dark/css-vars.css';

2.在main 引入 index.scss

// 引入全局樣式
import '@/styles/index.scss'

3.在 Vue 組件中動態切換主題

<script setup lang="ts">
import { useAppStore } from '@/store/modules/app' //引入的狀態管理
import { ThemeSwitch } from '@/components/ThemeSwitch' // 引入的組件黑白切換const appStore =  useAppStore()
const textColor = computed(() => appStore.getTextColor)
appStore.initTheme() // Pinia 實現狀態管理 </script><template><!--element-plus ElConfigProvider 組件的的封裝--><ConfigGlobal><!-- <p style="color: var(--el-text-color-primary);">p標簽</p> --><p :style="{'color':textColor}"  >p標簽</p><ThemeSwitch></ThemeSwitch></ConfigGlobal></template><style scoped lang="scss">
$prefix-cls: #{$namespace}-app;.size {width: 100%;height: 100%;
}html,
body {@extend .size;padding: 0 !important;margin: 0;overflow: hidden;#app {@extend .size;}
}.#{$prefix-cls}-grey-mode {filter: grayscale(100%);
}</style>

注意:CSS 變量與樣式沖突解決

• 如果你自定義的主題與 Element Plus 的默認樣式沖突，可以通過在你的主題 CSS 文件中明確覆蓋 Element Plus 的變量來解決。
• 在 var.css 中，確保所有需要覆蓋的變量都被正確設置
• element-plus 在vite.config.ts 配置自動導入

store/modules/app.ts

import { defineStore } from "pinia";
// import { store } from '../index'
// import { colorIsDark, hexToRGB, lighten, mix } from '@/utils/color'
import { setCssVar,humpToUnderline } from '@/utils'
import { useDark } from '@vueuse/core'  安裝 @vueuse/coreexport const useAppStore  = defineStore('app', {state: () => {return {isCollapse: false, // 菜單是否折疊isFullScreen: false, // 頁面是否全屏isDark:false, // 是否是暗黑模式textColor: '#303133',theme:{//文字的顏色// 主題色elColorPrimary: '#409eff',// 左側菜單邊框顏色leftMenuBorderColor: 'inherit',// 左側菜單背景顏色leftMenuBgColor: '#001529',// 左側菜單淺色背景顏色leftMenuBgLightColor: '#0f2438',// 左側菜單選中背景顏色leftMenuBgActiveColor: 'var(--el-color-primary)',// 左側菜單收起選中背景顏色leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',// 左側菜單字體顏色leftMenuTextColor: '#bfcbd9',// 左側菜單選中字體顏色leftMenuTextActiveColor: '#fff',// logo字體顏色logoTitleTextColor: '#fff',// logo邊框顏色logoBorderColor: 'inherit',// 頭部背景顏色topHeaderBgColor: '#fff',// 頭部字體顏色topHeaderTextColor: 'inherit',// 頭部懸停顏色topHeaderHoverColor: '#f6f6f6',// 頭部邊框顏色topToolBorderColor: '#eee'}} },getters:{getIsDark(): boolean {return this.isDark},getTextColor(): string {return this.textColor}},actions: {setIsDark(isDark: boolean) {this.isDark = isDarkif (this.isDark) {//  setCssVar('--el-text-color-primary', 'red')document.documentElement.classList.add('dark')document.documentElement.classList.remove('light')} else {//   setCssVar('--el-text-color-primary', '#303133')document.documentElement.classList.add('light')document.documentElement.classList.remove('dark')}this.textColor = this.isDark? 'red' : '#303133'// wsCache.set(CACHE_KEY.IS_DARK, this.isDark)},  setCssVarTheme() {for (const key in this.theme) {setCssVar(`--${humpToUnderline(key)}`, this.theme[key])}// this.setPrimaryLight()},setPrimaryLight() {if (this.theme.elColorPrimary) {const elColorPrimary = this.theme.elColorPrimaryconst color = this.isDark ? '#000000' : '#ffffff'const lightList = [3, 5, 7, 8, 9]lightList.forEach((v) => {setCssVar(`--el-color-primary-light-${v}`, mix(color, elColorPrimary, v / 10))})setCssVar(`--el-color-primary-dark-2`, mix(color, elColorPrimary, 0.2))}},initTheme() {const isDark = useDark({valueDark: 'dark',valueLight: 'light'})isDark.value = this.getIsDark},},persist: true
})// export const useAppStoreWithOut = () => {
//    return useAppStore(store)
//  }
// 使用到的函數
export const setCssVar = (prop: string, val: any, dom = document.documentElement) => {dom.style.setProperty(prop, val)
}/*** @param str 需要轉下劃線的駝峰字符串* @returns 字符串下劃線*/
export const humpToUnderline = (str: string): string => {return str.replace(/([A-Z])/g, '-$1').toLowerCase()
}

themeSwitch.vue

<script lang="ts" setup>
import { useAppStore } from '@/store/modules/app'
import { useIcon } from '@/hooks/web/useIcon'
import { useDesign } from '@/hooks/web/useDesign'
defineOptions({ name: 'ThemeSwitch' })const { getPrefixCls } = useDesign()// const prefixCls = getPrefixCls('theme-switch')
const prePrefixCls = 'ad-theme-switch'
const Sun = useIcon({ icon: 'emojione-monotone:sun', color: '#fde047' })const CrescentMoon = useIcon({ icon: 'emojione-monotone:crescent-moon', color: '#fde047' })const appStore = useAppStore()// 初始化獲取是否是暗黑主題
// const isDark = ref(appStore.getIsDark)// 設置switch的背景顏色
const blackColor = 'var(--el-color-black)'// const themeChange = (val: boolean) => {
//   appStore.setIsDark(val)
// }
const isDark = computed({get() {return appStore.getIsDark},set(val: boolean) {appStore.setIsDark(val)}
})
</script><template><el-switchv-model="isDark":active-color="blackColor":active-icon="Sun":border-color="blackColor":class="prefixCls":inactive-color="blackColor":inactive-icon="CrescentMoon"inline-prompt/>
</template>
<style lang="scss" scoped>
:deep(.el-switch__core .el-switch__inner .is-icon) {overflow: visible;
}
</style>

初始化的主題 ConfigGlobal.vue

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import { useAppStore } from '@/store/modules/app'
import { useDesign } from '@/hooks/web/useDesign'const { variables } = useDesign() // 命名規則const appStore = useAppStore()// 初始化所有主題色
onMounted(() => {appStore.setCssVarTheme()
})</script><template><ElConfigProvider:namespace="variables.elNamespace":message="{ max: 1 }"><slot></slot></ElConfigProvider>
</template>