用途:该技能面向 gluestack-ui 的主题系统,帮助在 React 与 React Native 项目中实现一致、可定制的界面样式。gluestack-ui 使用 NativeWind(React Native 版 Tailwind CSS)进行样式处理,主题系统提供设计令牌、暗色模式支持,并通过 Tailwind 配置进行定制。
主要能力:项目根目录使用 gluestack-ui.config.json 配置 tailwind 配置路径、CSS 文件、组件路径、TypeScript 与框架。通过 GluestackUIProvider 包裹应用,可传入 config 或 mode 控制主题。设计令牌覆盖颜色(primary、secondary、success、warning、error、info、typography、background、outline)、字体族与字号、间距与圆角等,均可在 tailwind.config.js 的 theme.extend 中扩展。暗色模式支持自动跟随系统(useColorScheme)与手动切换(结合 AsyncStorage 持久化主题模式),样式使用 dark: 前缀。
使用方式:在 tailwind.config.js 中引入 @gluestack-ui/nativewind-utils/theme 的 theme,设置 darkMode: 'class'、content 与 nativewind/preset,并扩展颜色、字体、圆角等令牌。应用入口用 GluestackUIProvider 包裹,暗色模式可传 mode。建议使用语义化颜色令牌而非字面颜色,集中管理设计系统令牌,扩展而非覆盖基础主题,并用 clsx 与 tailwind-merge 封装可复用样式工具。
适用场景:需要统一设计令牌、支持明暗主题、跨 iOS、Android 与 Web 的 gluestack-ui 应用。
限制:资料未提供具体安装命令、版本要求、收费与价格信息,暂未提供。