uni-app 使用darkmode 在鸿蒙4.0下自适应主题失败

uni-app 使用darkmode 在鸿蒙4.0下自适应主题失败

测试过的手机：

鸿蒙4.0 华为p30

示例代码：

uni.onThemeChange(({  
    theme  
}) => {  
    console.log('onThemeChange', theme)  
    uni.setStorageSync('sys_theme', theme)  
    if (uni.getStorageSync('theme_isAuto')) {  
        uni.setStorageSync('theme_mode', theme);  
        this.$u.vuex('vuexTheme_mode', theme)  
        // setTimeout(this.refreshPage, 200);  
    }  
})

操作步骤：

import theme from "@/theme.json";  

引入json  
class="{'theme-light': theme_mode === 'light', 'theme-dark': theme_mode === 'dark'}"
动态类名实现了主题的修改，全局通过vuex存储主题变量

预期结果：

正确修改颜色

实际结果：

在由light跟随系统切换到dark的时候样式错误

bug描述：

其他安卓手机正常（小米 vivo realme）
切换主题后没有正常切换颜色，监听得到的主题是正确的，感觉是没有动态修改成功。


更多关于uni-app 使用darkmode 在鸿蒙4.0下自适应主题失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

图片演示示例



更多关于uni-app 使用darkmode 在鸿蒙4.0下自适应主题失败的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


想问问你app 是采用什么方案实现主题色切换的

import theme from “@/theme.json”; 然后动态类名给元素 css两套

在鸿蒙4.0系统下，uni-app 使用 darkmode 实现自适应主题失败，可能是由于以下几个原因导致的。以下是一些排查和解决方案：

1. 检查鸿蒙系统对 darkmode 的支持

鸿蒙系统在4.0版本中可能对 darkmode 的支持与 Android/iOS 不完全一致。确保鸿蒙系统确实支持 darkmode，并且 uni-app 的相关 API 能够正常调用。

2. 使用 uni-app 的 darkmode API

uni-app 提供了 uni.getSystemInfoSync() 方法来获取系统信息，包括当前的主题模式（theme）。你可以通过以下代码检测系统主题：

const systemInfo = uni.getSystemInfoSync();
const isDarkMode = systemInfo.theme === 'dark';

if (isDarkMode) {
  console.log('当前系统处于深色模式');
  // 应用深色主题
} else {
  console.log('当前系统处于浅色模式');
  // 应用浅色主题
}

3. 监听主题变化

如果系统主题发生变化，可以通过监听 onThemeChange 事件来动态调整应用的主题：

uni.onThemeChange((res) => {
  if (res.theme === 'dark') {
    console.log('系统切换为深色模式');
    // 应用深色主题
  } else {
    console.log('系统切换为浅色模式');
    // 应用浅色主题
  }
});

4. 检查 CSS 变量和样式

确保你的样式文件中使用了 CSS 变量或动态类名来支持主题切换。例如：

/* 浅色主题 */
:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

/* 深色主题 */
.dark-mode {
  --background-color: #121212;
  --text-color: #ffffff;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

在 JavaScript 中动态切换类名：

if (isDarkMode) {
  document.body.classList.add('dark-mode');
} else {
  document.body.classList.remove('dark-mode');
}
回到顶部