Skip to content
Native Animation
Native Animation / Base

A little more you

React Native themes.
Light and dark.

Try six named accents in light and dark. See them across a complete set of controls, then take the theme into your app.

Theme preview

YOUR THEME, IN CONTEXT
Theme accent
ACTIONS & INPUTS

Make a little progress.

A shared foundation for every interaction.

SELECTION & NAVIGATION

Find your rhythm.

Daily remindersKeep the momentum going.
You’re all set for today.
SURFACES & FEEDBACK
Your next chapter01 / day at a time
Room to grow. Space to breathe.
Weekly goalOn track

Semantic colors. Shared radii. Purposeful motion. All yours.

theme.tslightdark / quill
import { createBaseTheme } from '@/components/base-theme';

const theme = createBaseTheme({
  scheme: 'light',
  accent: 'quill',
});import { createBaseTheme } from '@/components/base-theme';

const theme = createBaseTheme({
  scheme: 'dark',
  accent: 'quill',
});

This web preview uses the Base theme’s actual color, radius, and shadow tokens. Your native components use Reanimated springs. Read the theming guide for fonts, component props, and system appearance.

Take a light and dark theme into your app

Install the free Base theme with your components, then choose a named accent and system, light, or dark appearance. BaseThemeProvider shares semantic colors, spacing, radii, typography, and motion tokens across screens. You can change those values in your own TypeScript source and pass component props for local differences. The web preview shows the palette; test contrast and focus in the actual screen you build.

Start with the installation guide, inspect the Base theme source, and follow the accessibility checklist.