這其實是現代移動應用開發中非常常用的功能：自動適配淺色/深色模式（Light / Dark Mode）。

在業內，譬如 React Native + Expo 把這個機制做得非常友好，下面我幫你從原理到代碼一步步拆解，讓你徹底理解它是如何工作的。

一、Light / Dark Mode 的原理

1. 操作系統層

所有的主流操作系統（Android、iOS、macOS、Windows）都提供了「全局配色方案」設置：

• 淺色（Light）
• 深色（Dark）

當用戶在系統里選擇了一個模式后，操作系統會把這個偏好傳遞給應用程序。

---

2. React Native 如何獲取？

React Native 暴露了一個 hook：

const colorScheme = useColorScheme();

這個 hook：

• 自動監聽系統主題
• 返回 'light'、'dark' 或 null

例如：

const colorScheme = useColorScheme();
console.log(colorScheme);
// 可能打印：'light' 或 'dark'

一旦系統主題改變（比如用戶切換深色模式），React Native 會自動重新渲染你的組件。

---

3. 樣式怎么跟著變？

知道當前主題后，你就可以：

• 切換顏色
• 切換主題對象
• 切換字體或其他樣式

Expo Router 的模板里，就是通過 <ThemeProvider> 提供一個全局主題對象：

<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>

• 當 colorScheme 是 'dark'，使用 DarkTheme
• 當 colorScheme 是 'light'，使用 DefaultTheme

所有內部的組件（如導航、背景色、按鈕）就都自動使用對應的顏色配置。

---

二、關鍵代碼示例講解

來看你提到的核心代碼：

return (<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}><Stack><Stack.Screen name="(tabs)" options={{ headerShown: false }} /><Stack.Screen name="+not-found" /></Stack><StatusBar style="auto" /></ThemeProvider>
);

代碼講解：

useColorScheme()

• 獲取系統主題

ThemeProvider

• 提供全局主題對象
• 內部的 Stack、Tab、Drawer 會自動根據這個 Theme 渲染樣式（背景、字體顏色、分隔線等）

DarkTheme 和 DefaultTheme

• 都是內置的主題對象

• 定義了：

  • 主色
  • 背景色
  • 文本顏色
  • 邊框色
  • 卡片顏色

StatusBar style="auto"

• 自動根據主題切換狀態欄字體顏色（黑色/白色）

---

三、自定義主題

如果你想擴展自己的配色，可以在 themes.ts 文件定義：

export const MyLightTheme = {...DefaultTheme,colors: {...DefaultTheme.colors,primary: '#1e90ff',background: '#ffffff',text: '#333333',},
};export const MyDarkTheme = {...DarkTheme,colors: {...DarkTheme.colors,primary: '#1e90ff',background: '#000000',text: '#ffffff'