微信小程序夜间模式，实现更换皮肤，切换白天黑夜模式，简单易懂

先看下效果图吧：

夜晚模式样式：

白天正常样式：

先讲一下具体的思路和实现方法吧，我这个功能是项目已经上线一年后才提出要加上去的，由于页面比较多，重构wxss写自定义颜色再去修改太费力了，就选了简单粗暴的方式，直接另外写一套夜间模式的单独样式，在夜间模式的时候把白天模式的样式给覆盖掉，用户在点击模式切换的时候，直接设置一个全局变量‘idDark’存入到缓存中，然后在去到每一个tab页面的时候，在onLoad方法里面读取一下当前的’isDark’值,组件的话可以直接通过properties传产同样可以实现，或者在attached生命周期函数里面读取缓存获取，判断当前是否为夜间模式，如果是就显示夜间模式样式，如果不是就正常显示就ok，这里皮肤设置其实修改的全是文字和背景颜色，其实也没多少代码量，具体实现方式要你们自己去琢磨，稍微有点功底的应该就看得懂，简单贴一段代码吧；

wxml部分，直接在我们的原本代码盒子外围多添加一个view标签，根据isDark的值来动态控制是否需要显示夜间模式样式，如果是夜间模式就是加上dark样式类标签，不是则什么都不做

<view class="{{isDark?'dark':''}}"><view class="box">我是内容...</view><view class="footer">我是底部...</view>
</view>

wxss部分,这里也很简单，只需要把当前页面对应的夜间模式css文件引入即可，可以自己建一个文件夹SKIN来存放皮肤wxss文件，新建一个page-dark.wxss,用于编写夜间模式样式，然后在需要配置夜间模式的页面引入dark.wxss文件，记得放在最后，这样不用加！important来强行覆盖，直接重叠覆盖白天原有的样式

//正常页面显示样式index.wxss文件代码，就是白天样式
.box {background: #ffffff;color: #000000;
}.footer {background: #F2F2F2;color: #7C7C7C;
}@import '../../assets/skin/dark.wxss';

//下面是我们自己加的夜间样式dark.wxss代码
.dark {background: #000000;color: #ffffff;
}.dark .box {background: #222222;color: #ffffff;
}.dark  .footer {background: #7C7C7C;color: #ffffff;
}

看了应该就明白了，其实原理就是用.dark类名来覆盖原有白天样式，不要觉得麻烦，其实一个页面里面涉及到颜色的没有多少，改起来还是比较简单的，js部分我就不写了,上面已经说明白原理了，还有不会或者不太明白的可以留言，我看到会第一时间回复的！

微信小程序夜间模式，实现更换皮肤，切换白天黑夜模式，简单易懂相关推荐

宝宝起名神器微信小程序源码下载支持多种流量主模式
2022年马上到了,还不知道怎么给虎宝宝取名字嚒那么这款小程序源码就可以帮到你了这款小程序支持输入姓氏自动起名,不满意还可以点击换一换来找到满意的支持起两个字或者三个字的名字另外小编也给该款小 ...
热门表情包+头像+壁纸自动采集多分类微信小程序源码下载支持多种流量主模式
这是一款自动采集的一款微信小程序源码内由表情包,头像,还有壁纸组合而成的一款图片小程序每一个都自带多种分类,内容丰富运营适合另外支持插屏广告,激励视频广告,等多种广告废话不多说,下面看小编的 ...
字体设计符号组合多功能微信小程序源码下载支持多流量主模式
这是一款主打字体设计,符号组合等多模板功能的一款微信小程序源码内含多种功能,比如: 花式字体设计表情字体组合设计翅膀字体组合火星文一键生成符号库空白名称彩色网名等等还有很多,所以小编就 ...
最牛王者荣耀装逼神器助手微信小程序源码下载支持多种流量主模式
这是一款以王者荣耀为主的一款装逼生成工具支持王者营地战绩DIY生成(支持新旧两种营地版本) 支持王者荣耀游戏首页DIY制作生成支持王者荣耀个人主页界面DIY制作生成支持天梯界面DIY制作生成另 ...
万圣节头像框生成工具微信小程序源码下载支持流量主收益模式
大家好万圣节马上就要来了那么临近了万圣节那么也给大家带来了一款与万圣节相关的程序那么这款程序呢就是可以制作生成与万圣节相关的头像框内含多种模板风格可供选择支持用户上传模式和自动获取微信头像模式 ...
全新UI简洁又不失美观的短视频去水印微信小程序源码,支持多做流量主模式
这是一款去水印小程序源码自带高速解析和下载接口 UI方面简洁但是又很美观实用支持一键粘贴和自动识别粘贴功能另外支持历史解析记录查看 PS:这个历史记录支持记录解析日期,点击每一个日期可以显示该日 ...
多功能起名查重工具微信小程序源码下载支持多种流量主模式
这是一个实用需求量还是比较高的一款微信小程序源码由多个功能组合而成,具体如下名字来源查询取名工具(支持多种选择取名) 查询重复名(输入名字查询有多少人和你吃饭) 诗文(里面就是一些古诗啥的展示) ...
小程序源码：最新wordpress黑金壁纸微信小程序二开修复版-多玩法安装简单
这是一款wordpress系统框架的壁纸小程序源码相信很多人以前也有用过这类的壁纸小程序源码吧现在给大家发的这一款是二开修复版的和以前的安装方式差不多,支持流量主收益模式介绍: WordPre ...
php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
本篇文章给大家带来的内容是关于微信小程序实例:实现顶部tab切换以及滑动切换时导航栏会随着移动的效果(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现的效果: js: Pa ...
微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...

微信小程序夜间模式，实现更换皮肤，切换白天黑夜模式，简单易懂

夜晚模式样式：

白天正常样式：

wxml部分，直接在我们的原本代码盒子外围多添加一个view标签，根据isDark的值来动态控制是否需要显示夜间模式样式，如果是夜间模式就是加上dark样式类标签，不是则什么都不做

微信小程序夜间模式，实现更换皮肤，切换白天黑夜模式，简单易懂相关推荐

最新文章

热门文章