SuperAPI AI 工具集

universal-theme

前端与建站

查看项目

更新于 10-15 21:39

技能介绍

用途:在 Expo 通用项目中统一实现浅色、深色与跟随系统三种主题模式,覆盖 iOS、Android 和 Web,同时兼容 Web 静态渲染。适用于使用通用 CSS(Tailwind v4 + react-native-css)的项目。

主要能力: CSS 层:用 color-scheme 自动响应 prefers-color-scheme;在 html 上加 .light 或 .dark 类手动强制主题(shadcn/ui 模式);用 light-dark() 定义随配色方案自动切换的 CSS 变量。 React 层:ThemeContextProvider 提供 mode、resolvedTheme、setMode、isDark,统一管理主题状态;可结合 React Navigation 的 ThemeProvider 同步导航主题。 平台处理:Web 上改 html 类名;iOS/Android 用 React Native 的 Appearance.setColorScheme(),iOS 延迟 100ms 以平滑动画。 持久化与同步:Web 端用 localStorage 保存偏好,通过 storage 事件实现跨标签页同步。 防闪烁:ThemeScript 在 React 水合前以内联脚本读取 localStorage 并应用类名,避免加载时主题闪烁(FOUC)。 切换过渡:切换时临时禁用 CSS 过渡,避免生硬动画。

使用方式:在根布局中放置 ThemeScript(建议 head 或 body 开头)并用 ThemeProvider 包裹内容;组件内通过 useTheme() 读取或设置模式。

限制与注意:仅适用于 Expo 通用项目与通用 CSS 组合;Web 端依赖 localStorage,不可用时静默回退;脚本与类名方案仅 Web 生效,原生依赖 Appearance API;未提供安装命令、包名、收费与版本信息。