言归正传，还是分析功能点
1.点击按钮切换一组css（这个功能很简单）
2、将皮肤设置保存到全局变量中，访问其他页面时也会有效果。
3. 将设置保存到本地。当您退出应用程序并返回时，您上次设置的皮肤仍然会加载。
让我们从切换开始。 Switch很少用，所以我最好把它贴出来。
页（{
数据： {
皮肤风格：""
},
onLoad: 函数（选项）{
},
switchChange:函数（e）{
var that=this
变量样式
//如果启用
if(e.detail.value==true){
风格="深色"
}别的{
//否则
样式.skin=""
}
//保存信息
that.setData({
皮肤风格：风格
})
}
})按钮功能就OK了，现在我们去写样式
对于像这样的黑色风格皮肤，请使用#000作为背景颜色
使用#333 作为小背景，使用#999 作为文本。我懒得用颜色选择器。
由于我们需要一套皮肤，所以我们到文件夹外面去写一个样式文件
只需新建一个皮肤目录，在下面写入dark.wxss即可。
然后呢
让我们复制正常模式下的wxss并将其粘贴到
保留与颜色相关的属性并删除其他属性。
比如背景、边框、颜色等。不想要任何其他东西
最后我发现只剩下这些了。
/*夜间模式*/
/****个人信息页****/
.暗盒{
背景： #000！重要；
}
/*用户信息部分*/
.暗箱.用户箱{
背景： #333！重要；
颜色： #999;
}
/*列出部分*/
.暗盒.额外盒{
背景： #333！重要；
}
.暗盒.额外盒.额外项目{
border-bottom: 1px 实心#000！重要；
}
.暗盒.额外盒.item-head{
颜色： #999;
}
.暗盒.间盒{
背景： #333！重要；
}
.dark-box . Between-left{
背景： #333！重要；
}
.dark-box . Between-left .item-head{
颜色： #999;
}
/****个人信息页结束****/大家注意到我的风格名称有黑框
这个暗盒是最外面最大的盒子（默认页面除外）
my-box 为普通模式，dark-box 为夜间模式
当然，你也可以写皮肤风格，黄色、红色或蓝色。
现在采用这种写法，我们只需控制变量skinStyle的值就可以改变皮肤样式。
我们还可以编写一个蓝框皮肤，然后将变量skinStyle设置为蓝色。
还有一个关键的步骤，就是在wxss文件中将这个皮肤文件引入到要显示的页面中。
@import "././skin/dark.wxss";下一步很容易。
要将其设置为全局变量，只需先getApp() 然后将其传递到那里即可。
var app=getApp()
页（{
数据： {
皮肤风格：""
},
onLoad: 函数（选项）{
},
switchChange:函数（e）{
var that=this
//设置全局变量
if(e.detail.value==true){
app.globalData.skin="深色"
}别的{
app.globalData.skin=""
}
that.setData({
SkinStyle: app.globalData.skin
})
}
}) 现在访问其他页面时，深色皮肤也会被传入。
我只写了一页，所以只有这一页会改变
现在第三步是将其保存到localstroge。
var app=getApp()
页（{
数据： {
皮肤风格：""
},
onLoad: 函数（选项）{
},
switchChange:函数（e）{
var that=this
//设置全局变量
if(e.detail.value==true){
app.globalData.skin="深色"
}别的{
app.globalData.skin=""
}
that.setData({
SkinStyle: app.globalData.skin
})
//保存到本地
wx.setStorage({
key: "皮肤",
data: app.globalData.skin
})
}
})你完成了吗？并不真地。
我们想要获取程序打开时的皮肤设置
所以需要在app.js中获取皮肤相关信息
获取皮肤：函数（）{
var that=this
wx.getStorage({
key: "皮肤",
success: 函数（res）{
that.globalData.skin=res.data
}
})
}现在我们设置黑色皮肤然后退出。进去后就不会黑了。
因为我们在页面加载时没有设置
onLoad: 函数（选项）{
var that=this
that.setData({
SkinStyle: app.globalData.skin
})
【小程序夜间模式皮肤功能解析】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
终于可以晚上的时候舒服一点儿看屏幕了！
有8位网友表示赞同！
这个功能我一直期盼着呢！晚上手机太刺眼了。
有8位网友表示赞同！
夜间模式简直是必备的功能啊，好多了，眼睛不那么累。
有18位网友表示赞同！
试了一下，感觉确实比原来看着舒服很多，画面柔和了好多。
有17位网友表示赞同！
希望以后小程序都可以实现夜间模式吧！
有18位网友表示赞同！
这种功能应该早点推出，晚上刷手机真的受不了屏幕的灯光。
有18位网友表示赞同！
对一些老人或者长时间使用手机的人来说，这个功能非常实用。
有18位网友表示赞同！
终于不用再调出系统设置来切换夜间模式啦！
有16位网友表示赞同！
小程序支持夜间模式让我更容易在深夜使用它了。
有14位网友表示赞同！
我的眼睛真是拯救了！以前晚上的手机简直是魔鬼的屏幕啊。
有10位网友表示赞同！
这个功能终于来了，晚上的时间可以安心玩游戏了（笑）
有13位网友表示赞同！
小程序的设计越来越人性化了，夜间模式真的非常贴心。
有11位网友表示赞同！
夜间模式的好处多多，护眼就是最重要的一点！
有8位网友表示赞同！
晚上读书看小说都不用担心屏幕的刺激感了。
有7位网友表示赞同！
这个功能对用户使用体验提升真大啊！期待更多小程序加入夜间模式！
有19位网友表示赞同！
终于不用担心长期使用手机导致视力下降啦！
有10位网友表示赞同！
夜间模式是一个很实用的功能，而且也很容易操作。
有12位网友表示赞同！
这个功能让我更加喜欢使用小程序了。
有13位网友表示赞同！
希望以后的小程序都普及夜间模式的功能吧！
有12位网友表示赞同！