微信小程序 暗黑模式

2、配置主题文件

在根目录新建主题配置文件 theme.json, 并在 app.json 中配置路径引入

// app.json
    ...
     themeLocation :  theme.json 
}

theme.json 配置文件一共分为两个属性，light 和 dark，分别正常模式和暗黑模式。

theme.json 示例如下（仅供参考）：

// theme.json
   light : {
     navBackgroundColor :  #ffffff ,
     navTextStyle :  black 
   dark : {
     navBackgroundColor :  #000000 ,
     navTextStyle :  white 
}

必须存在 light 和 dark 两个属性，里层命名自定义，没有严格要求。

在配置属性以 @ 开头拼接 theme.json 中自定义的名字写入配置，示例如下

// app.json
  ...
   window : {
     navigationBarBackgroundColor :  @navBackgroundColor ,
     navigationBarTitleText :  小书包大梦想 ,
     navigationBarTextStyle :  @navTextStyle 
   darkmode : true,
   themeLocation :  theme.json 
}

配置完些，接着手机开启暗黑模式（深色模式）后，小程序会根据你配置的颜色进行转换。

wxss 中，支持通过媒体查询 prefers-color-scheme 适配不同主题。

如下样式会在正常模式下页面背景为灰白色，暗黑模式下为黑色。

/* 正常模式下应用的样式 */
page{
    background: #f1f1f1;
/* 暗黑模式下应用的样式 */
@media (prefers-color-scheme: dark) {
  page{
    background: #000000;
}

推荐教程：《微信小程序》

以上就是微信小程序 暗黑模式的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！