Set up a shared React Native Base theme with semantic colors, fonts, spacing, and motion. Follow the light and dark mode guide for your Expo app.
Choose a starting point
Preview the whole set, choose Quill, Tide, Grove, Bloom, Cove, or Kiln, and switch between light and dark. Quill is the default neutral palette. Copy theme exports the exact createBaseTheme configuration shown in the preview.
Legacy aliases still work: neutral → quill, blue → tide, green → grove, and violet → bloom. The CLI and the MCP setup accept the named accents and the aliases: npx nativeanimation init --base --accent cove. You can also change the accent later in BaseThemeProvider or createBaseTheme.
import { createBaseTheme } from '@/components/base-theme';
const theme = createBaseTheme({ scheme: 'light', accent: 'cove' });Share the theme
Use BaseThemeProvider at the app root and useBaseTheme in screen components. Resolve the system color scheme in the host app: the provider accepts light or dark. A component’s explicit theme prop takes precedence over the provider. The fallback without a provider is Quill in light mode.
Semantic tokens
| Token | Purpose |
|---|---|
| background / foreground | Screen canvas and text |
| card / cardForeground | Grouped surfaces |
| primary / primaryForeground | Main actions and selected controls |
| muted / mutedForeground | Secondary surfaces and supporting text |
| border / input / ring | Boundaries, fields, and focus |
| destructive | Error and destructive intent |
Accents replace primary, primaryForeground, and ring. The rest of the neutral surface hierarchy stays consistent. Changing brand colors requires checking contrast for the actual foreground/background pairs and all interaction states.
Spacing and shape
Theme spacing tokens are 4, 8, 12, 16, and 24. Radius tokens sm, md, lg, xl, and full are 6, 8, 10, 14, and 999. Use the same hierarchy across screens instead of styling each control independently.
Typography
Load the font families named by the theme once in the host app. The defaults use Geist Regular and Medium; semibold currently maps to Medium. To use your own fonts, update the theme’s font-family tokens. Avoid setting fontWeight alongside a custom font family. Allow system text scaling and test long labels.
Motion
Components share named springs and transitions from base-theme. Keep interruption and system Reduce Motion behavior when customizing them. The web theme preview is an HTML illustration of native tokens, not a native performance benchmark.