微信小程序深色模式(DarkMode)适配

江河/ 01月04日/ 小程序/ 浏览 1586

如何开启深色模式(DarkMode)


在 app.json 中 darkmode 设置为 true,即表示此小程序已适配了深色模式。


如何定义深色模式


1. 在app.json中配置themeLocation,指定变量配置文件theme.json路径,例如:在根目录下新增theme.json,需要置"themeLocation":"theme.json";


2. 在theme.json中定义相关变量;


3. 在app.json中以@开头引用变量。


举例:theme.json


{
  "light": {
    "navBgColor": "#f6f6f6",
    "navTxtStyle": "black"
  },
  "dark": {
    "navBgColor": "#191919",
    "navTxtStyle": "white"
  }
}


app.json 及 页面配置中引用相关变量


// 全局配置
{
  "window": {
    "navigationBarBackgroundColor": "@navBgColor",
    "navigationBarTextStyle": "@navTxtStyle"
  }
}
// 页面配置
{
  "navigationBarBackgroundColor": "@navBgColor",
  "navigationBarTextStyle": "@navTxtStyle"
}


获取当前是否是深色模式


如果app.json中声明了"darkmode": true,wx.getSystemInfo或wx.getSystemInfoSync的返回结果中会包含theme属性,值为light或dark。


如果app.json未声明"darkmode": true,则无法获取到theme属性(即theme为undefined)


监听主题切换事件


支持2种方式:


1. 在App()中传入onThemeChange回调方法,主题切换时会触发此回调


2. 通过wx.onThemeChange监听主题变化,wx.offThemeChange取消监听


适配CSS


/* 一般情况下的样式 begin */
.some-background {
    background: white;
}
.some-text {
    color: black;
}
/* 一般情况下的样式 end */

@media (prefers-color-scheme: dark) {
    /* DarkMode 下的样式 start */
    .some-background {
        background: #1b1b1b;
    }
    .some-text {
        color: #ffffff;
    }
    /* DarkMode 下的样式 end */
}


发表评论

暂无评论,抢个沙发...

客服 工单