网赚网为广大上网爱好者提供目前网上赚钱好项目,以及大学生兼职网赚、就业平台。网赚网免费公益公开课讲座教程,网赚纯干货技术分享,让你轻松做网赚,在家等收入,还在等什么,轻松登陆,赶快加入我们,安全更可靠!

微信小程序 暗黑模式

2020-06-28 07:28:08 栏目 : PC软件 围观 : 评论
来自 CSDN 作者 小书包大梦想 原文链接

1、开启暗黑模式

在 app.json 中配置 "darkmode": true
  1. // app.json
  2. {
  3. ...
  4. "darkmode": true
  5. }

2、配置主题文件

在根目录新建主题配置文件 theme.json, 并在 app.json 中配置路径引入
  1. // app.json
  2. {
  3. ...
  4. "themeLocation": "theme.json"
  5. }
theme.json 配置文件一共分为两个属性,light 和 dark,分别正常模式和暗黑模式。theme.json 示例如下(仅供参考):
  1. // theme.json
  2. {
  3. "light": {
  4. "navBackgroundColor": "#ffffff",
  5. "navTextStyle": "black"
  6. },
  7. "dark": {
  8. "navBackgroundColor": "#000000",
  9. "navTextStyle": "white"
  10. }
  11. }
必须存在 light 和 dark 两个属性,里层命名自定义,没有严格要求。

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

在配置属性以 @ 开头拼接 theme.json 中自定义的名字写入配置,示例如下
  1. // app.json
  2. {
  3. ...
  4. "window": {
  5. "navigationBarBackgroundColor": "@navBackgroundColor",
  6. "navigationBarTitleText": "小书包大梦想",
  7. "navigationBarTextStyle": "@navTextStyle"
  8. },
  9. "darkmode": true,
  10. "themeLocation": "theme.json"
  11. }
配置完些,接着手机开启暗黑模式(深色模式)后,小程序会根据你配置的颜色进行转换。

4、wxss样式适配暗黑模式

wxss 中,支持通过媒体查询 prefers-color-scheme 适配不同主题。如下样式会在正常模式下页面背景为灰白色,暗黑模式下为黑色。
  1. /* 正常模式下应用的样式 */
  2. page{
  3. background: #f1f1f1;
  4. }
  5. /* 暗黑模式下应用的样式 */
  6. @media (prefers-color-scheme: dark) {
  7. page{
  8. background: #000000;
  9. }
  10. }
5、效果图
上一篇:微信小程序实习记 下一篇:返回列表

相关文章