uni-app 程序启动设置为高亮时，手机设置为暗黑模式无法启动

在 uni-app 中，如果你将应用程序的启动设置为高亮（即使用亮色主题），而用户的手机系统设置为暗黑模式，可能会导致应用程序无法正常启动或显示异常。这是因为暗黑模式和高亮模式之间的冲突。

要解决这个问题，你可以采取以下几种方法：

1. 动态适配系统主题

你可以通过检测系统的主题模式，动态地调整应用程序的主题。uni-app 提供了 uni.getSystemInfo 方法，可以获取系统的主题信息。

uni.getSystemInfo({
  success: function (res) {
    if (res.theme === 'dark') {
      // 系统为暗黑模式，应用暗黑主题
      document.body.style.backgroundColor = '#000';
      document.body.style.color = '#fff';
    } else {
      // 系统为亮色模式，应用亮色主题
      document.body.style.backgroundColor = '#fff';
      document.body.style.color = '#000';
    }
  }
});

2. 使用 uni-app 的 theme 配置

在 pages.json 中，你可以配置 theme 来适配不同的主题模式。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "theme": "light" // 或者 "dark"
      }
    }
  ]
}

3. 使用 CSS 变量

你可以使用 CSS 变量来定义不同的主题颜色，并根据系统主题动态切换。

:root {
  --background-color: #fff;
  --text-color: #000;
}

[data-theme="dark"] {
  --background-color: #000;
  --text-color: #fff;
}

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

然后在 JavaScript 中动态切换主题：

uni.getSystemInfo({
  success: function (res) {
    if (res.theme === 'dark') {
      document.documentElement.setAttribute('data-theme', 'dark');
    } else {
      document.documentElement.setAttribute('data-theme', 'light');
    }
  }
});

4. 使用 uni-app 插件

你也可以使用一些 uni-app 插件来帮助管理主题，例如 uni-ui 中的 uni-theme 组件。

5. 强制使用亮色主题

如果你希望无论系统设置如何，都强制使用亮色主题，可以在 App.vue 的 onLaunch 方法中设置：

export default {
  onLaunch: function() {
    uni.setNavigationBarColor({
      frontColor: '#000000',
      backgroundColor: '#ffffff'
    });
    uni.setTabBarStyle({
      color: '#000000',
      selectedColor: '#000000',
      backgroundColor: '#ffffff'
    });
  }
}

6. 使用 manifest.json 配置

在 manifest.json 中，你可以配置 app-plus 的 theme 来强制使用亮色主题：

{
  "app-plus": {
    "theme": "light"
  }
}