vue3 主题模式 结合 element-plus的主题

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>