微信小程序深色模式

1. 开启深色模式

在 app.json 中设置 "darkmode": true

// app.json{ ... "darkmode": true} 2. 设置主题文件

创建一个新主题文件，根目录下的一个，在主题配置文件theme.json中，设置导入路径为app.json。

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

主题。 json配置文件分为两个属性：light和dark，分别是普通模式和深色模式。

以下是示例 Theme.json（仅供参考）。

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

必须存在两个属性：浅色和深色。 内层命名是自定义的，没有严格要求。

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

配置属性以 @ 开头，并以 theme.json 中的自定义名称开头来描述配置。 一个例子是：

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

配置完成后，深色模式（深色模式），小程序根据您设置的颜色进行变换。

4. wxss 样式适应深色模式。

在 wxss 中，媒体查询优先 k3] 方案适应不同的主题。 p>

以下样式在普通模式下为灰白色，在深色模式下为黑色。

/* 样式在普通模式下应用 /page{ background: # f1f1f1;} /* 在深色模式下应用样式。 */@media (prefers-color-scheme: dark) { page{ background: #000000 }} 5.渲染

推荐教程：“微信小程序”

下载微信应用

微信支持语音消息、视频、照片和文字。微信是一款支持通过手机网络发送的移动通讯软件，可以单独聊天或群聊。组，还可以根据地理位置进行搜索。您附近的人带来全新的移动通信体验。 有需要的朋友可以保存并下载自己的经验。

下载

这几篇文章你可能也喜欢：

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：微信小程序深色模式 https://zhujicankao.com/123615.html