如何按深色模式引入不同CSS主题

useColorScheme 返回值应通过条件表达式动态控制 style 属性或预定义 StyleSheet 样式对象，而非拼接 class 名；React Native 不支持 CSS 类名解析，必须将主题逻辑落地为 JS 样式对象或内联 style。

useColorScheme 返回值怎么用在 CSS 类名上

直接把 useColorScheme() 的返回值（'light' 或 'dark'）拼进 class 名里，是最轻量、最可控的方式。React Native 不支持 data-theme 或 :root 变量，所以不能靠 CSS 层级切换；必须靠 JS 控制组件 class 或 style。

1. 不要写成 className={`theme-${colorScheme}`} 然后指望全局 CSS 文件自动生效 —— React Native 的 StyleSheet 不解析字符串 class，这行不通
2. 正确做法是用条件表达式控制 style 属性，或配合 StyleSheet.create() 预定义两套样式对象
3. 如果用了第三方 UI 库（如 @rneui/themed 或 nativecn-ui），优先走它的 ThemeProvider + createTheme 路径，别自己硬套 class

Tailwind 用户注意 darkMode: "class" 的实际效果

你在 tailwind.config.js 里设了 darkMode: "class"，不代表页面会自动响应系统深色模式 —— 它只表示「当某个父元素有 dark 类时，dark: 前缀的样式才生效」。

1. 必须手动给根容器加类，比如 <View className={colorScheme === 'dark' ? 'dark' : ''}>
2. Expo 项目还需确保 app.json 中启用了 "userInterfaceStyle": "automatic"，否则 useColorScheme() 永远返回 'light'
3. dark:bg-black dark:text-white 这类写法只在该 View 有 dark 类时才起作用，不是全局开关

原生 CSS 文件按主题加载的坑

Web 项目常用 link rel="stylesheet" 动态换 CSS 文件，但在 React Native 里完全不可行 —— 没有 DOM，也没有 document.head。

1. 别尝试用 require('./dark.css')，RN 不解析 CSS 文件，会报 Unable to resolve module
2. 所有样式最终必须转为 JS 对象（StyleSheet.create）或内联 style，哪怕你用的是 Tailwind 或 styled-components
3. 若强行用 Web 方案（如 React Native Web），需额外判断平台，且 useColorScheme() 在 Web 端返回 null，得 fallback 到 window.matchMedia

主题切换后状态没更新？检查这三处

常见表现是：系统切到深色，但 App 里文字还是黑底黑字 —— 大概率不是逻辑错，而是状态没真正订阅上。

1. useColorScheme() 必须在函数组件顶层调用，不能包在 if 或自定义 hook 里（除非那个 hook 内部也用了它）
2. 如果你封装了 ThemeProvider，确认它用的是 Appearance.addChangeListener 而非仅初始化时读一次值
3. 某些 UI 库（如早期版本 @rneui/themed）要求 theme 对象必须是稳定引用，每次渲染不能新建对象，否则子组件不重绘

深色模式不是“加个 class 就完事”，关键在「谁决定颜色、谁响应变化、谁负责渲染更新」这三者的链路是否真正打通。漏掉任意一环，都会出现样式卡在旧状态。