分类：主题切换

2021
07-31

vue实现主题切换的多种思路分享

目录动态改变主题第一种办法：动态组件第二种办法，路由隔离总结额外补充基于css的两种方法方法一多套css方法二scss动态切换变量动态改变主题首先需要解决的是如何知道你需要显示哪个主题，并且可以动态切换。我选择的方法是queryString。我们打开url的时候，可以在后面缀上?theme=xx,读取这个xx储存起来即可。第一种办法：动态组件当主题的路由并没有发生变化，仅是组件内部的样式，功能发生了变化，我们可以将一个组件复制... 继续阅读 >

2020
11-29

VUE项目实现主题切换的多种方法

需求是做一个深色主题和浅色主题切换的效果方法一多套css这个方法也是最简单，也是最无聊的。<!--中心--><template>动态获取父级class名称，进行一个父级class的多次定义<div:class="className"><divclass="switch"v-on:click="chang()">{{className=="box"?"开灯":"关灯"}}</div></div></template><script>exportdefault{name:"Centre",data(){return{className:"box"};},methods:{//... 继续阅读 >

2020
09-27

Flutter以两种方式实现App主题切换的代码

概述App主题切换已经成为了一种流行的用户体验，丰富了应用整体UI视觉效果。例如，白天夜间模式切换。实现该功能的思想其实不难，就是将涉及主题的资源文件进行全局替换更新。说到这里，我想你肯定能联想到一种设计模式：观察者模式。多种观察对象（主题资源）来观察当前主题更新的行为（被观察对象），进行主题的更新。今天和大家分享在 Flutter平台上如何实现主题更换。效果实现流程在Flutter项目中，MaterialApp组件为... 继续阅读 >

2020
09-24

vue在线动态切换主题色方案

主要原理是利用webpack插件webpack-theme-color-replacer提取相关颜色css然后根据配置动态生成替换的css具体实现步骤如下：1.添加webpack插件，新建文件webpack/themePlugin.jsconstThemeColorReplacer=require('webpack-theme-color-replacer')constforElementUI=require('webpack-theme-color-replacer/forElementUI')constconfig=require('../src/config/appConfig')module.exports=newThemeColorReplacer({fileN... 继续阅读 >