中国排名前十跨境电商平台_建站之星至尊版_十大少儿编程教育品牌_百度竞价推广

当时面试的时候遇到面试官问的一个问题如何实现自定义颜色主题切换,当时我做的只是elementUIPlus提供的暗黑和默认主题切换​​​​​​​

theme.scss

// 增加自定义主题类型
$themes: (light: (/* 原有配置保持不变 */),dark: (/* 原有配置保持不变 */),custom: () // 空映射用于自定义主题
);// 新增CSS变量定义方式
:root {// 原有主题变量...// 自定义主题变量--custom-primary-color: #409eff;--custom-background-color: #ffffff;--custom-text-color: #303133;
}

main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import { initCustomTheme } from './utils/themeManager' // 新增导入const app = createApp(App)app.use(ElementPlus)// 新增自定义主题初始化
initCustomTheme()
app.mount('#app')

 themeManager.ts

// 新增自定义主题设置方法
export const setCustomTheme = (colors: {primary: stringbackground: stringtext: string
}) => {// 更新CSS变量document.documentElement.style.setProperty('--custom-primary-color', colors.primary)document.documentElement.style.setProperty('--custom-background-color', colors.background)document.documentElement.style.setProperty('--custom-text-color', colors.text)// 应用自定义主题document.documentElement.setAttribute('data-theme', 'custom')ElConfigProvider.setGlobalConfig({theme: {primary: colors.primary}})// 存储自定义配置localStorage.setItem('customTheme', JSON.stringify(colors))
}// 初始化自定义主题
export const initCustomTheme = () => {const saved = localStorage.getItem('customTheme')if (saved) {const colors = JSON.parse(saved)setCustomTheme(colors)}
}

ThemeCustomizer.vue

<template><div class="color-picker"><el-color-picker v-model="colors.primary" show-alpha @change="updateTheme" /><el-color-picker v-model="colors.background" @change="updateTheme" /><el-color-picker v-model="colors.text" @change="updateTheme" /></div>
</template><script setup lang="ts">
import { reactive } from 'vue'
import { setCustomTheme } from '../utils/themeManager'const colors = reactive({primary: '#409eff',background: '#ffffff',text: '#303133'
})const updateTheme = () => {setCustomTheme({ primary: colors.primary,background: colors.background,text: colors.text})
}
</script><style lang="scss" scoped>
.color-picker {@include theme {background: theme-value(background-color);padding: 20px;border: 1px solid theme-value(primary-color);}:deep(.el-color-picker__trigger) {@include theme {border-color: theme-value(primary-color);}}
}
</style>