【vue-win10-admin交友系列】主题切换方案

前言【vue-koa2全栈win10风格管理系统】交友系列文章，带大家开发一个全栈win10风格管理系统。当然项目中也参考了很多优秀的前后端项目搭建方案和我的一些工作。一些经验应用，主要是结交朋友的心态，如果你对这个项目感兴趣，也希望你能加入进来，完善和维护这个项目，放手吧~~~完整项目地址：vue-win10-admin本文为【Vue+Koa2+Mysql全栈win10风格管理系统】MakeaFriend系列主题切换方案先来一张主题切换效果图，主要实现背景图片和主题颜色的切换，清爽浏览器仍然可以保持一致。实现功能的主要技术点1.使用localStorage浏览器将主题设置信息存储在本地（当然也可以存储在数据库中）2.通过scss从主题文件中提取与颜色相关的CSS值并替换withkeywords3.实时监控localStorage更改keyword，然后改回生成对应的颜色值或背景图2.提取主题变量，将mixin封装在目录styles/theme-variable.scss中先替换CSS与主题文件中的颜色相关的值，并执行$background-color-theme1:#409EFF;$background-color-theme2:#0078D7;$background-color-theme3:#C30052;$background-color-主题4：#9A0089；$background-color-theme5：#67C23A；$background-color-theme6：#CA5010；$background-color-theme7：#CA5010；$background-color-theme8：红色；$background-color-theme9:#303133;$background-color-theme10:#606266;$background-color-theme11:#909399;$background-color-theme12：#C0C4CC；$background-color-theme13：#DCDFE6；$background-color-theme14：#E4E7ED；$backg圆形颜色主题15：#EBEEF5；$背景颜色主题16：#FFFFFF；$字体颜色黑色：#303133；$字体颜色白色：#FFFFFF；$startMenu-background-color-black:rgba(19,23,28,0.9);$startMenu-背景色-白色：#F2F6FC；在目录styles/theme-mixin.scss中设置背景色，封装成mixin方法（包括字体大小，字体颜色，封装），@mixin使用自定义属性[data-theme=""]标识对应的颜色变量@mixinbackground-color($color){background-color:$color;[data-theme="theme1"]&{background-color:$background-color-theme1;}[data-theme="theme2"]&{背景色:$background-color-theme2;}[data-theme="theme3"]&{background-color:$background-color-theme3;}[data-theme="theme4"]&{背景色:$background-color-theme4;}[data-theme="theme5"]&{背景颜色:$background-color-theme5;}[data-theme="theme6"]&{背景色:$background-color-theme6;}[data-theme="theme7"]&{background-color:$background-color-theme7;}[data-theme="theme8"]&{背景nd-颜色：$背景颜色主题8；}[data-theme="theme9"]&{背景色:$background-color-theme9;}[data-theme="theme10"]&{背景颜色：$background-color-theme10;}[data-theme="theme11"]&{背景色:$background-color-theme11;}[data-theme="theme12"]&{background-color:$background-color-theme12;}[data-theme="theme13"]&{背景色:$background-color-theme13;}[data-theme="theme14"]&{背景色:$background-color-theme14;}[data-theme="theme15"]&{背景色:$background-color-theme15;}[data-theme="theme16"]&{背景色:$background-color-theme16;}}在需要切换肤色的页面引用@import"~@/styles/theme-mixin.scss";@import"@/styles/theme-variable.scss";@include背景颜色（$背景颜色主题1）；//参考背景颜色设置@includefont-color($font-color-white);//参考字体设置，例如布局页面布局（部分显示）中的相关文件，这里基本的scss技巧不再做更多解释@import"~@/styles/theme-mixin.scss";@import"@/styles/theme-variable.scss";.window-wrapper{position:absolute;min-width:1280px;min-height:80%;z-index:9;.window-header{height:40px;行高：40px；@include背景颜色（$背景颜色主题1）；过渡：所有.5s；显示：弹性；.window-title{flex:1;左填充：10px；用户选择：无；颜色：#fff；@includefont-color($font-color-white);transition:all.5s;三、主题颜色设置在目录src/views/config/coloer/index.vue中更换主题时的操作代码再次选择主题时，我这里可以选择16种主题颜色，列表用v-for列表渲染，每种颜色绑定点击一个个事件，通过DOM操作设置自定义属性[data-theme]，在html中添加自定义属性data-theme，这样就实现了皮肤切换，但是这样有什么缺点呢？当你刷新浏览器时，你会发现这个设置不会生效，所以考虑将其存储在浏览器缓存中。注册全局方法，然后通过事件派发实现localstorage的响应式。根据我们项目中的主题相关属性，目前有一个对象存储了主题和背景图片相关的设置。我们针对src/utils/storage.js中的NativelocalStorageAPI进行封装，生成自己的公共主题设置模块storagedispatchmoduleexportconstdispatchSetLocalStore=(key,type,value)=>{letsettings=_getLocalStore(key,'JSONStr')||{theme:11,taskbarMode:'bottom',bgSrc:''}switch(type){case'bgSrc':settings.bgSrc=valuebreakcase'theme':settings.theme=valuebreakcase'taskbarMode':settings.taskbarMode=valuebreak}settings=JSON.stringify(settings)//创建一个StorageEvent事件letnewStorageEvent=document.createEvent('StorageEvent');conststorage={setItem:function(k,val){localStorage.setItem(k,val)//初始化创建的事件newStorageEvent.initStorageEvent('setItem',false,false,k,null,val,null,null)//dispatchobjectwindow.dispatchEvent(newStorageEvent)}}返回存储。setItem(key,settings)}然后在src/main.js中给vue添加一个prototype属性改变src/目录下更换主题时的操作代码views/config/coloer/index.vue不是window.document.documentElement.setAttribute('data-theme',theme)而是this.setLocalStore(localKey,'theme',theme)5.总结换皮肤的方法是将与颜色相关的CSS值替换成关键字，根据用户选择的主题颜色生成一系列对应的颜色值，将用户选择的主题和背景图片全部存储在localstorage中，通过键值对，然后通过全局事件派发响应式获取localstorage。通过自定义属性的属性值，将对应的关键字变回刚才生成的对应颜色值，切换背景图，然后分别给它添加一些toggles画画，换皮肤切换背景图看起来自然~【Vue+Koa2+Mysql全栈Win10风格管理系统】交友系列文章，会根据项目搭建和功能点实现，欢迎大家来交流~完整项目地址：vue-win10-admin