用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序 - 暗黑模式(深色模式)

Rolan 2020-7-16 00:52

最近暗黑模式成为了潮流,微信小程序也推出了暗黑模式适配,下面来记录一个下适配暗黑模式。效果图:一、实现1、开启暗黑模式在 app.json 中配置 "darkmode": true// app.json{ ... "darkmode": true}2、配置主题 ...

最近暗黑模式成为了潮流,微信小程序也推出了暗黑模式适配,下面来记录一个下适配暗黑模式。

效果图:

一、实现
1、开启暗黑模式

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

// app.json
{
    ...
    "darkmode": true
}
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 两个属性,里层命名自定义,没有严格要求。

 

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;
  }
}
 
————————————————
原文:https://blog.csdn.net/ZXW_Future/java/article/details/106246715
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 小书包大梦想 来自: csdn