核心内容摘要
穿越人海,寻觅那份“人人爱”的温暖当爱成为一种信仰_1
背景问题现代应用需要支持主题切换包括浅色、深色等多种主题需要动态调整样式。
方案思考如何使用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-
; } } }动态主题应用// utils/dynamicTheme.ts - 动态主题应用import{ref,watchEffect}fromvue;// 主题配置interfaceThemeConfig{primaryColor:string;backgroundColor:string;textColor:string;borderColor:string;borderRadius:string;}// 预设主题constpresetThemes:Recordstring,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(){constcurrentThemeref(light);// 应用主题constapplyTheme(themeName:string){constthemepresetThemes[themeName];if(!theme)return;constrootdocument.documentElement;Object.entries(theme).forEach(([key,value]){root.style.setProperty(--${key},value);});// 添加主题类名root.classNameroot.className.replace(/\btheme-\w\b/g,);root.classList.add(theme-${themeName});};// 监听主题变化watchEffect((){applyTheme(currentTheme.value);});// 切换主题constswitchTheme(themeName:string){currentTheme.valuethemeName;localStorage.setItem(theme,themeName);};// 获取当前主题constgetCurrentTheme(){returncurrentTheme.value;};// 初始化主题constinitTheme(){constsavedThemelocalStorage.getItem(theme);if(savedThemepresetThemes[savedTheme]){currentTheme.valuesavedTheme;}};return{currentTheme,switchTheme,getCurrentTheme,initTheme};}效果验证通过CSS变量和JavaScript结合可以实现流畅的主题切换效果。
经验