1. 检测系统主题：
首先，你需要检测用户的系统主题是明亮模式还是深色模式。可以通过 wx.getSystemInfo 获取系统信息，其中包含 theme 字段，表示系统主题。
wx.getSystemInfo({
success: function(res) {
console.log(res.theme); // 可能的值: 'light'（明亮模式）, 'dark'（深色模式）
}
});
2. 调整样式：
根据用户的系统主题，动态调整小程序的样式。可以通过在 WXML 文件中使用条件语句来根据系统主题应用不同的样式类。
<!-- 在 WXML 文件中 -->
<view class="{{theme === 'dark' ? 'dark-mode' : 'light-mode'}}">
<!-- 页面内容 -->
</view>
在对应的 WXSS 文件中定义两种样式类：
/* 在 WXSS 文件中 */
.dark-mode {
background-color: #333;
color: #fff;
/* 其他深色模式下的样式 */
}
.light-mode {
background-color: #fff;
color: #333;
/* 其他明亮模式下的样式 */
}
3. 动态切换主题：
如果你希望用户能够手动切换主题，可以提供一个切换按钮，并在用户点击时动态改变页面样式。可以使用 setData 来更新页面数据，触发样式的动态变化。
// 在对应的 Page 实例中
Page({
data: {
theme: 'light', // 初始主题，默认为明亮模式
},
switchTheme: function() {
const newTheme = this.data.theme === 'light' ? 'dark' : 'light';
this.setData({
theme: newTheme,
});
},
});
用户点击切换按钮时，调用 switchTheme 方法，切换主题并更新页面数据。
4. 适配图片：
如果你的小程序中使用了图片，确保这些图片在不同主题下都能够良好显示。有时候，可能需要提供两套不同主题的图片资源。
<!-- 在 WXML 文件中 -->
<image src="{{theme === 'dark' ? 'dark-image.png' : 'light-image.png'}}"></image>
以上是一个基本的 Dark Mode 适配指南，具体的实现可能因项目需求而有所不同。确保在适配过程中考虑用户体验，使用户在不同主题下都能够获得良好的使用体验。
转载请注明出处：http://www.zyzy.cn/article/detail/654/微信小程序