Vue—— Vue3 + Node.js 后台管理系统 之 【主题系统动态应用】

背景问题

现代应用需要支持主题切换，包括浅色、深色等多种主题，需要动态调整样式。

方案思考

• 如何使用CSS变量实现主题切换
• 如何持久化主题设置
• 如何优化主题切换性能

具体实现

CSS变量主题：

// style/theme.scss - 主题样式系统 // 默认主题样式 :root { --primary-color: #409eff; --primary-light-1: #53a8ff; --primary-light-2: #66b1ff; --primary-light-3: #79bbff; --primary-light-4: #8cc5ff; --primary-light-5: #a0d2ff; --primary-light-6: #b3dffb; --primary-light-7: #c6e7ff; --primary-light-8: #d9f0ff; --primary-light-9: #ecf7ff; --bg-color: #ffffff; --text-color: #303133; --border-color: #dcdfe6; } // 深色主题样式 html.dark { --primary-color: #337ecc; --primary-light-1: #428bda; --primary-light-2: #519ce8; --primary-light-3: #60aef6; --primary-light-4: #70c2ff; --primary-light-5: #8ed0ff; --primary-light-6: #abe0ff; --primary-light-7: #c9eeff; --primary-light-8: #e6f8ff; --primary-light-9: #f2fbff; --bg-color: #1d1e1f; --text-color: #e4e7ed; --border-color: #4c4d4f; } // 使用主题变量的组件样式 .app-container { background-color: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); .primary-button { background-color: var(--primary-color); color: white; &:hover { background-color: var(--primary-light-1); } } }

动态主题应用：

// utils/dynamicTheme.ts - 动态主题应用import{ref,watchEffect}from'vue';// 主题配置interfaceThemeConfig{primaryColor:string;backgroundColor:string;textColor:string;borderColor:string;borderRadius:string;}// 预设主题constpresetThemes:Record<string,ThemeConfig>={light:{primaryColor:'#409eff',backgroundColor:'#ffffff',textColor:'#303133',borderColor:'#dcdfe6',borderRadius:'4px'},dark:{primaryColor:'#337ecc',backgroundColor:'#1d1e1f',textColor:'#e4e7ed',borderColor:'#4c4d4f',borderRadius:'4px'},blue:{primaryColor:'#1890ff',backgroundColor:'#f0f8ff',textColor:'#001529',borderColor:'#91d5ff',borderRadius:'6px'}};// 动态主题应用exportfunctionuseDynamicTheme(){constcurrentTheme=ref('light');// 应用主题constapplyTheme=(themeName:string)=>{consttheme=presetThemes[themeName];if(!theme)return;constroot=document.documentElement;Object.entries(theme).forEach(([key,value])=>{root.style.setProperty(`--${key}`,value);});// 添加主题类名root.className=root.className.replace(/\btheme-\w+\b/g,'');root.classList.add(`theme-${themeName}`);};// 监听主题变化watchEffect(()=>{applyTheme(currentTheme.value);});// 切换主题constswitchTheme=(themeName:string)=>{currentTheme.value=themeName;localStorage.setItem('theme',themeName);};// 获取当前主题constgetCurrentTheme=()=>{returncurrentTheme.value;};// 初始化主题constinitTheme=()=>{constsavedTheme=localStorage.getItem('theme');if(savedTheme&&presetThemes[savedTheme]){currentTheme.value=savedTheme;}};return{currentTheme,switchTheme,getCurrentTheme,initTheme};}

效果验证

通过CSS变量和JavaScript结合，可以实现流畅的主题切换效果。

经验总结

主题系统不仅要考虑视觉效果，还要考虑性能和用户体验，特别是在主题切换过程中的过渡效果。