小程序通过按钮全局自由切换夜间模式和日间模式代码

要实现小程序中通过按钮全局自由切换夜间模式和日间模式，你可以按照以下步骤进行实现：

1. 在app.js中定义一个全局变量，用于保存当前的主题模式（例如nightMode）。

App({
  globalData: {
    themeMode: 'day', // 默认为日间模式
  },
  // 其他全局方法和属性
})

2. 在app.wxss中定义两套样式，分别对应日间模式和夜间模式。

/* 日间模式样式 */
.page {
  background-color: #ffffff;
  color: #333333;
}

/* 夜间模式样式 */
.page-night {
  background-color: #333333;
  color: #ffffff;
}

3. 在需要切换主题的页面中，创建一个按钮或其他触发事件的元素。

<button bindtap="toggleTheme">切换主题</button>

4. 在触发事件的回调函数中，根据当前主题模式切换全局样式，并更新全局变量。

toggleTheme: function() {
  var app = getApp();
  var themeMode = app.globalData.themeMode === 'day' ? 'night' : 'day';
  app.globalData.themeMode = themeMode;
  
  if (themeMode === 'night') {
    wx.setStorageSync('themeMode', 'night');
  } else {
    wx.removeStorageSync('themeMode');
  }

  wx.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: themeMode === 'night' ? '#333333' : '#ffffff'
  });

  // 更新当前页面样式
  this.setData({
    themeClass: themeMode === 'night' ? 'page-night' : ''
  });
}

5. 在小程序的入口页面（例如app.js中的onLaunch方法）中，读取本地缓存中的主题模式，并更新全局变量和当前页面样式。

onLaunch: function() {
  var themeMode = wx.getStorageSync('themeMode');
  var app = getApp();
  app.globalData.themeMode = themeMode || 'day';

  // 更新当前页面样式
  this.setData({
    themeClass: app.globalData.themeMode === 'night' ? 'page-night' : ''
  });
}

这样，当用户点击切换主题按钮时，全局的主题模式将切换，并更新当前页面的样式。同时，当前选择的主题模式也会被保存到本地缓存中，下次打开小程序时保持之前选择的主题模式。