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

本文介绍了如何在已上线项目中添加夜间模式功能,通过创建额外的夜间样式并在用户切换时覆盖原有样式。关键在于设置全局变量存储用户选择,并在每个页面加载时读取该变量来决定是否应用夜间模式。示例代码展示了在WXML和WXSS中如何实现样式切换,以及如何组织夜间模式的CSS文件。这种方法适用于页面数量多,不希望大规模重构的情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先看下效果图吧:

夜晚模式样式:

在这里插入图片描述

白天正常样式:

在这里插入图片描述
先讲一下具体的思路和实现方法吧,我这个功能是项目已经上线一年后才提出要加上去的,由于页面比较多,重构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部分我就不写了,上面已经说明白原理了,还有不会或者不太明白的可以留言,我看到会第一时间回复的!
微信小程序的navigationBar,即页面顶部的导航栏,允许开发者自定义其样式。要修改文字、颜色和背景色,可以使用`navigatorStyle`属性。下面是一些关键设置: 1. **文字(textColor)**:可以通过`navigatorStyle: {textColor: '#你的颜色'}`来设置导航栏的文字颜色,其中`#你的颜色`可以替换为十六进制的颜色值。 2. **标题文字(titleText)**:如果需要改变标题文字,直接在`wx.navigateTo`或`wx.switchTab`等跳转函数中传入自定义的标题,例如 `wx.navigateTo({url: '/yourPage', title: '你的标题'})`。 3. **背景色(backgroundColor)**:导航栏的背景色同样通过`navigatorStyle: {backgroundColor: '#你的颜色'}`设置。注意,背景颜色通常默认为白色或透明,除非你在某个页面设置了主题色,它会覆盖全局默认。 4. **夜间模式(nightMode)**:如果你的应用支持夜间模式,可以在`App.json`配置文件中启用,并通过`navigatorStyle`控制夜间模式下的导航栏颜色。 ```json { "window": { "backgroundTextStyle": "light", // 或者"dark",分别对应白天和黑夜模式 "navigationBarBackgroundColor": "#000", // 黑夜模式下导航栏的背景色 "navigationBarTitleText": "你的标题", // 白天模式标题 "navigationBarTextStyle": "white", // 白天模式文字颜色 "navigationBarNightBackgroundImage": "path/to/night-image.png", // 夜间模式背景图片 "navigationBarNightTitleText": "你的标题(夜间版)", // 夜晚模式标题 "navigationBarNightTextStyle": "white" // 夜晚模式文字颜色 } } ```
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端攻城狮路飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值