feat(mobile): add built-in themes

[chrisdeeming]

What Changed

Adds built-in theme support to the React Native app, using the same shared palettes and previews as the desktop app.

• Adds T3 Code, T3 Chat, Grove, Ocean, Ember, and Iris to Settings > Appearance
• Adds System, Light, and Dark appearance selection to Settings > Appearance
• Applies the selected palette across all mobile surfaces
• Persists the mobile appearance preference locally
• Moves the canonical built-in palettes and preview generation into the shared package so desktop and mobile cannot drift independently
• Adds focused coverage for palette mapping, previews, mobile theme resolution, and terminal colors
• Documents mobile appearance selection

This PR intentionally does not include theme importing, custom theme creation, or theme editing.

Why

Mobile previously used one fixed palette and could not match the built-in themes available in the desktop app.

Sharing the palette definitions and preview logic gives both clients the same source of truth, while keeping the React Native theme layer responsible for translating those values into native surfaces.

UI Changes

Video walkthrough:

mobile_themes.mp4

The walkthrough demonstrates theme selection, color-scheme switching, the thread list, thread view, file search, and the themed code viewer.

A video is included instead of screenshots because it shows the palette transitions and cross-surface behavior more clearly.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes — video supplied instead
• I included a video for animation/interaction changes

---

Note

Medium Risk
Wide UI surface area and preference persistence affect default visuals and native diff/terminal theming; showcase timing changes could affect screenshot CI reliability.

Overview
Adds six built-in palettes (T3 Code, T3 Chat, Grove, Ocean, Ember, Iris) with System / Light / Dark mode, persisted per light and dark appearance, wired through AppearancePreferencesProvider and shared @t3tools/shared palette definitions.

Settings gains a Theme section (preview orbs, per-appearance picks). The app stops using useColorScheme for UI and instead uses effective theme appearance plus injected CSS variables (Uniwind), including new tokens (--color-sheet-solid, split switch track/thumb colors, user-bubble skill text). ThemedSwitch centralizes switch styling; markdown, composer, sheets, and native review/terminal colors pull from theme tokens.

Native review/terminal themes now follow the selected palette (opaque hex for native bridges); showcase capture reads --showcaseTheme, applies the palette before screenshots, gates review on a native draw signal, and the GitHub Actions workflow adds a theme input with longer timeouts when capturing all themes.

^{Reviewed by Cursor Bugbot for commit cd54e7b. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add built-in theme palette selection to the mobile app

• Adds a ThemeAppearanceSection to the mobile Appearance settings screen, letting users pick from multiple built-in palettes (Grove, Ocean, Ember, Iris) in addition to the default T3 Code theme.
• Moves shared theme definitions, types, and constants into @t3tools/shared/themePalettes and @t3tools/shared/themePreview, consumed by both web and mobile.
• Replaces system useColorScheme calls throughout the mobile app with useAppearancePreferences, so all UI components respect the in-app appearance and palette selection.
• Adds a ThemedSwitch component that applies theme tokens for track and thumb colors, replacing native Switch in settings, environment, and task screens.
• Extends the mobile showcase screenshot CLI with a --theme flag to capture screenshots per palette; native iOS and Android modules expose getShowcaseTheme to receive the requested palette from the test runner.
• Extends AppearancePreferencesProvider to manage per-appearance theme IDs, apply CSS variables for both light and dark palettes, and expose setters for theme selection.
• Risk: FORM_SHEET_PRESENTATION_OPTIONS and several header/navigator configs no longer set explicit background colors; screens that previously relied on these defaults must now declare bg-sheet or bg-sheet-solid themselves.

^{Macroscope summarized cd54e7b.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 3ec36528-3ea2-4cb2-8c6a-188b308ee622

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Needs human review

This PR introduces a significant new feature adding built-in theme selection to the mobile app, with new UI components, shared palette infrastructure, and cross-cutting changes to color handling across 80+ files. New user-facing capabilities of this scope warrant human review.

^{You can customize Macroscope's approvability policy. Learn more.}

[t3-code]

reviewed at 0e3de52. the contrast fixes are complete, targeted and full mobile tests pass, all required checks pass, and i found no remaining blockers.

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit d30a03d. Configure here.}