主题

自定义 NativeWind、React Native Reusables 与应用主题行为。

Expo 模板用 NativeWind 做 app styling,用 React Native Reusables-style primitives 做组件 variants,并用 React Navigation theme objects 覆盖 native navigation surfaces。 浅色/深色模式作为用户偏好持久化,默认支持跟随系统。

关键文件

global.css
tailwind.config.js
theme.ts
theme-preference.tsx
cache.ts
app/_layout.tsx
app.config.ts
scripts/generate-assets.js

Token flow

文件修改内容
CSS variablesglobal.css--background--primary--ios-grouped-bg、separator、input、grouped-surface values
Tailwind aliasestailwind.config.jsbg-backgroundtext-foregroundbg-ios-grouped-bgtext-ios-tint、hairline borders
JS constantslib/theme.tsTHEMEIOS_COLORSgetIOSColor()、React Navigation NAV_THEME
Componentscomponents/ui/*CVA variants 与可复用 primitive styling
Screensapp/**/*.tsxNativeWind className,以及少量 runtime colors 的 getIOSColor()

保持 global.csslib/theme.ts 同步。NativeWind classes 读取 CSS tokens; React Navigation 和部分 runtime style objects 读取 JS tokens。

外观偏好

ThemePreferenceProvidersystemlightdark 存在 preferences.theme.v1,底层使用 lib/cache.ts。Native 平台使用 AsyncStorage; web 使用 localStorage。hydrate 后,provider 会调用 nativewindColorScheme.set(theme)

ThemeToggle 是紧凑的 icon button,会在当前 resolved color scheme 的 light/dark 之间切换。完整的 Profile picker 暴露三个选项,包括 system

app/_layout.tsx 读取 useColorScheme(),应用 NAV_THEME,设置 status bar style, 并给 root stack 设置当前 scheme 的 iOS grouped background。

Splash pairing

app.config.ts 刻意让 native splash background 匹配 app 的 grouped background: 浅色是 #f2f2f7,深色通过 expo-splash-screen plugin 设置为 #000000。 这样首个 React screen 绘制前不会出现白色或黑色闪屏。

可选的 AnimatedSplash component 会把 assets/lottie/splash.json 中的 Lottie 覆盖在 app 上,并在 isReady 为 true 后淡出。

Rebrand checklist

修改产品颜色

更新 global.css,必要时更新 tailwind.config.js aliases,并同步 lib/theme.ts。同时检查 grouped backgrounds 和 primary/tint colors。

替换 assets

准备一个 1024x1024 source icon,然后运行:

pnpm generate:assets

脚本会写出 icon.pngadaptive-icon.pngsplash.pngfavicon.png。 如果生成的 splash background 需要匹配自定义品牌色,设置 SPLASH_BACKGROUND

更新 app identity

app.config.ts.env.local 中修改 display names、bundle/package IDs、 schemes、associated domains 与 store URLs。

验证 surfaces

运行 iOS、Android、web。检查 cold launch、tab headers、modals、bottom sheets、 dialogs、toast colors、Component gallery 与 Showcase theming demo。

相关页面

On this page