uni-app 手机设置成暗夜深色主题，输入框文字与背景色同为白色导致不显示，不仅输入框，部分未设置颜色的字体也存在此问题。

针对uni-app在手机设置为暗夜深色主题时，输入框文字与背景色同为白色导致不显示的问题，可以通过动态调整样式或使用CSS变量来适配系统主题。以下是一个基于Vue和uni-app的解决方案示例：

1. 使用CSS变量和JavaScript动态调整样式

首先，在App.vue中定义一个全局的CSS变量来存储当前的主题颜色，并监听系统主题变化事件来更新这个变量。

<template>
  <App />
</template>

<script>
export default {
  onLaunch() {
    // 初始化主题
    this.updateTheme();

    // 监听系统主题变化（仅部分浏览器和系统支持）
    if (window.matchMedia) {
      const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
      mediaQueryList.addEventListener('change', this.updateTheme);
    }
  },
  methods: {
    updateTheme() {
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      document.documentElement.style.setProperty('--main-bg-color', isDarkMode ? '#000000' : '#FFFFFF');
      document.documentElement.style.setProperty('--main-text-color', isDarkMode ? '#FFFFFF' : '#000000');
    }
  }
};
</script>

<style>
:root {
  --main-bg-color: #FFFFFF;
  --main-text-color: #000000;
}

input, .text {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
}
</style>

2. 在组件中使用CSS变量

在你的页面或组件中，直接使用这些CSS变量来设置输入框和文本的颜色。

<template>
  <view>
    <input type="text" placeholder="Type something" />
    <view class="text">This is some text</view>
  </view>
</template>

<style scoped>
input, .text {
  /* 使用CSS变量 */
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  padding: 10px;
  border: 1px solid #CCCCCC; /* 可以根据需要调整边框颜色 */
}
</style>

3. 注意事项

• 确保你的uni-app项目支持CSS变量。
• 监听系统主题变化的事件可能不是所有设备和浏览器都支持，但大多数现代设备和浏览器都支持window.matchMedia。
• 对于更复杂的主题切换，可以考虑使用状态管理（如Vuex）来存储和更新主题状态。

通过上述方法，你可以确保在暗夜深色主题下，输入框和文本的颜色能够自动调整，避免因为颜色相同而导致不显示的问题。