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

参考文档

• 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
  }
})

        

          
        
        
        

          

          AI 代码解读
        
      
      

• 在 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"
  }
}

        

          
        
        
        

          

          AI 代码解读