微信小程序 暗黑模式

1、开启暗黑模式

app.json 中配置 "darkmode": true

// app.json
{
    ...
    "darkmode": true
}

2、配置主题文件

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

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

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

theme.json 示例如下(仅供参考):

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

必须存在 lightdark 两个属性,里层命名自定义,没有严格要求。

3、在 app.json 中应用配置属性

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

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

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

4、wxss样式适配暗黑模式

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

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

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

5、效果图

微信小程序 暗黑模式

推荐教程:《微信小程序

以上就是微信小程序 暗黑模式的详细内容,更多请关注立业阁其它相关文章!

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服![email protected] QQ276087365
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!

立业阁 微信小程序教程 微信小程序 暗黑模式 https://www.liyege.cn/wxxcxahms.html

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘
查看详情

相关文章