微信小程序适配暗黑模式

//theme.json
{
 "light": {
   "navigationBarTextStyle": "black",
   "navBackgroundColor": "#ffffff",
   "backgroundColor": "#ebeaef",
   "backgroundTextStyle": "dark",
   "tabFontColor":"#bfbfbf",
   "tabSelectedColor":"#515151",
   "tabBgColor":"#ffffff",
   "tabBorderStyle":"black",
   "iconPath1": "images/ghome.png",
   "iconPath2": "images/gzb.png",
   "iconPath3": "images/guser.png",
   "selectedIconPath1": "images/bhome.png",
   "selectedIconPath2": "images/bzb.png",
   "selectedIconPath3": "images/buser.png"
 },
 "dark": {
   "navigationBarTextStyle": "white",
   "navBackgroundColor": "#000000",
   "backgroundColor": "#000000",
   "backgroundTextStyle": "light",
   "tabFontColor":"#bfbfbf",
   "tabSelectedColor":"#ffffff",
   "tabBgColor":"#191919",
   "tabBorderStyle":"white",
   "iconPath1": "images/ghome.png",
   "iconPath2": "images/gzb.png",
   "iconPath3": "images/guser.png",
   "selectedIconPath1": "images/whome.png",
   "selectedIconPath2": "images/wzb.png",
   "selectedIconPath3": "images/wuser.png"
 }
}

//app.json

"darkmode": true,
"themeLocation": "theme.json",
"window": {
    "navigationBarTitleText": "番茄记账VIP",
    "backgroundColor": "@backgroundColor",
    "backgroundTextStyle": "@backgroundTextStyle",
    "navigationBarBackgroundColor": "#FE6853",
    "navigationBarTextStyle": "@navigationBarTextStyle",
    "navigationStyle": "custom"
  },
"tabBar": {
    "color": "@tabFontColor",//tab未选中字体颜色
    "selectedColor": "@tabSelectedColor",//tab选中字体颜色
    "backgroundColor": "@tabBgColor",//tab背景色
    "borderStyle": "@tabBorderStyle",//tab border颜色
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "@iconPath1",
        "selectedIconPath": "@selectedIconPath1"
      },
      {
        "pagePath": "pages/notebooks/notebooks",
        "text": "账本",
        "iconPath": "@iconPath2",
        "selectedIconPath": "@selectedIconPath2"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我",
        "iconPath": "@iconPath3",
        "selectedIconPath": "@selectedIconPath3"
      }
    ]
  },

我这边只做了page背景适配，和主要的内容区背景的适配，工作量比较少

//app.wxss
page {
  background: #ebeaef;
  font-size: 30rpx;
  /* font-family: Microsoft YaHei; */
}
.bg_white_gray {
  background: white;
}
.page_bg_change {
  background: #ebeaef;
}

.op_bg {
  background-color: rgba(0, 0, 0, 0.2);
}

.hover-class {
  opacity: 0.8 !important;
  background: rgba(0, 0, 0, 0.1) !important;
}
/* 暗黑模式下应用的样式 */
@media (prefers-color-scheme: dark) {
  page {
    background: #000000;
  }
  .bg_white_gray {
    background: #191919;
  }
  .page_bg_change {
    background: #000000;
  }
  .op_bg {
    background-color: rgba(255, 255, 255, 0.2);
  }

  .hover-class {
    opacity: 0.8 !important;
    background: rgba(255, 255, 255, 0.2) !important;
  }
}

官方文档点这里

上效果图
⬇️