uniapp onthemechange如何使用或监听主题变化

在uniapp中，如何使用onthemechange来监听主题变化？我尝试在App.vue和页面中调用这个方法，但似乎没有触发回调。是否需要特别的配置才能生效？官方文档对这个API的说明比较简略，能否提供一个完整的使用示例？包括如何检测初始主题和动态切换时的回调处理。

2 回复

在uniapp中，可通过uni.onThemeChange监听主题变化：

uni.onThemeChange((res) => {
  console.log('主题变化：', res.theme)
})

当系统主题切换时（如深色/浅色模式），回调函数会触发，返回当前主题值。


在 UniApp 中，onthemechange 是一个用于监听系统主题变化（如深色/浅色模式切换）的 API。它适用于部分平台（如小程序、H5），但需注意兼容性。以下是使用方法和示例：

使用方法

  1. 监听主题变化：通过 uni.onThemeChange 注册监听事件。
  2. 获取当前主题：使用 uni.getTheme 获取系统当前主题。
  3. 移除监听：必要时用 uni.offThemeChange 取消监听。

代码示例

// 在页面或全局监听主题变化
uni.onThemeChange(function(res) {
  console.log('主题已切换为:', res.theme); // 输出：'dark' 或 'light'
  // 根据主题更新界面样式
  if (res.theme === 'dark') {
    // 应用深色样式
    console.log('切换到深色模式');
  } else {
    // 应用浅色样式
    console.log('切换到浅色模式');
  }
});

// 获取当前主题（可选）
uni.getTheme({
  success: function(res) {
    console.log('当前主题:', res.theme);
  }
});

// 移除监听（如在页面卸载时）
// uni.offThemeChange(callbackFunction);

注意事项

  • 平台支持：仅部分平台支持（如微信小程序、H5）。需在 manifest.json 中配置相关功能，或使用条件编译。
  • 响应式更新：监听回调中可动态修改 CSS 变量或类名，实现主题切换效果。
  • 测试建议：在真机或支持主题切换的环境中测试。

通过以上代码，即可在 UniApp 中监听并响应系统主题变化。

回到顶部