uni-app 开启darkmode后，使用媒体查询@media (prefers-color-scheme: dark)在安卓不生效

在 Uni-app 中开启 Dark Mode 后，使用 @media (prefers-color-scheme: dark) 媒体查询在安卓设备上不生效，可能是由于以下几个原因：

1. 安卓系统版本问题

prefers-color-scheme 媒体查询在安卓 10（API 级别 29）及以上版本中才被完全支持。如果你的设备运行的是较旧的安卓版本，可能无法正确识别 prefers-color-scheme。

2. Uni-app 运行环境问题

Uni-app 在不同平台（如 H5、小程序、App）上的实现方式不同。在 App 端（包括安卓），prefers-color-scheme 可能没有被正确支持或实现。

3. CSS 优先级问题

确保你的 @media (prefers-color-scheme: dark) 查询的 CSS 规则没有被其他更高优先级的规则覆盖。

4. 系统设置问题

确保设备的系统设置中已经启用了 Dark Mode。在安卓设备上，通常可以在“设置” > “显示” > “主题”或“夜间模式”中启用 Dark Mode。

解决方案

方案 1：使用 Uni-app 提供的 API 检测主题

Uni-app 提供了 uni.getSystemInfoSync() 方法，可以用来获取系统信息，包括当前的主题模式。你可以根据系统主题动态设置样式。

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

if (isDarkMode) {
  // 应用暗黑模式样式
} else {
  // 应用亮色模式样式
}

方案 2：使用 CSS 变量动态切换主题

你可以通过 JavaScript 动态设置 CSS 变量，以根据当前主题切换样式。

<template>
  <view :class="themeClass">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDarkMode: false,
    };
  },
  computed: {
    themeClass() {
      return this.isDarkMode ? 'dark-theme' : 'light-theme';
    },
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    this.isDarkMode = systemInfo.theme === 'dark';
  },
};
</script>

<style>
:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

.dark-theme {
  --background-color: #121212;
  --text-color: #ffffff;
}

.light-theme {
  --background-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}
</style>