Taro@3.x+Vue@3.x+TS开发微信小程序，根据系统主题展示不同样式（darkMode）

置顶 theMuseCatcher

已于 2024-04-28 16:34:25 修改

阅读量304

点赞数 4

于 2024-04-28 15:57:31 首次发布

本文链接：https://blog.csdn.net/dandrose/article/details/138281361

版权

Vue3 同时被 2 个专栏收录

79 篇文章 11 订阅

订阅专栏

Taro

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Taro框架的src/app.config.ts中配置darkMode，以及如何在src/theme.json中定义不同主题的样式变量，包括导航栏背景色和文字颜色，以适应iOS和微信公众平台的显示需求。

摘要由CSDN通过智能技术生成

参考文档

Taro官网
微信官方文档
微信公众平台
darkMode
在 src/app.config.ts 下写入相关配置：

export default defineAppConfig({
  darkmode: true, // 所有基础组件均会根据系统主题展示不同的默认样式，navigation bar 和 tab bar 也会根据下面的配置自动切换
  themeLocation: 'theme.json',
  window: {
    // backgroundColor: '@bgColor', // 窗口的背景色
    backgroundColorTop: '@bgColorTop', // 顶部窗口的背景色，仅 iOS 支持，默认 #ffffff，即loading背景色
    backgroundColorBottom: '@bgColorBottom', // 底部窗口的背景色，仅 iOS 支持，默认 #ffffff
    backgroundTextStyle: '@bgTxtStyle', // 下拉 loading 的样式，仅支持 dark / light，默认 dark
    // navigationStyle: 'custom', // 全局导航栏样式，仅支持以下值：default 默认样式；custom 自定义导航栏，只保留右上角胶囊按钮
    navigationBarBackgroundColor: '@navBgColor', // 导航栏背景颜色，默认 #000000
    navigationBarTitleText: 'WeChat', // 导航栏标题文字内容
    navigationBarTextStyle: '@navTxtStyle' // 导航栏标题颜色，仅支持 black | white
  }
})

在 src/theme.json 中写入相关样式变量

{
  "light": {
    "bgColor": "#FFFFFF",
    "bgTxtStyle": "dark",
    "navBgColor": "#f6f6f6",
    "navTxtStyle": "black",
    "bgColorTop": "#FFFFFF",
    "bgColorBottom": "#FFFFFF"
  },
  "dark": {
    "bgColor": "#1677ff",
    "bgTxtStyle": "light",
    "navBgColor": "#191919",
    "navTxtStyle": "white",
    "bgColorTop": "#000000",
    "bgColorBottom": "#000000"
  }
}