您的位置 首页 技术

微信小程序 暗黑模式

1、开启暗黑模式 在 app.json 中配置 "darkmode": true // app.json{ … "darkmode": …

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、效果图

93d7ae941c6b79bf26846956a1a2837.png

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

以上就是微信小程序 暗黑模式的详细内容,更多请关注24课堂在线网其它相关文章!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/92212.html

为您推荐

返回顶部