Design Tokens

Theme architecture

The public compatibility entry point is constants/design-tokens.ts, which re-exports the modular theme system from constants/themes/. New code should import from @/constants/themes.

import { AppThemeRegistry, DesignTokens } from '@/constants/themes';

The theme system separates:

• Base token models, colors, typography, and spacing.
• Theme definitions: modern, retro, cozy, and paper.
• AppThemeRegistry, which resolves the active theme and brightness.
• ThemeContext, which exposes the resolved tokens to components.

Using tokens

const { tokens } = useTheme();

return (
  <View style={{ backgroundColor: tokens.background, padding: tokens.spacing.md }}>
    <Text style={{ color: tokens.textPrimary }}>Hello</Text>
  </View>
);

Prefer tokens over hard-coded colors and spacing so dark mode, theme changes, and accessibility preferences remain consistent.

Customizing a theme

1. Add or edit a theme definition under constants/themes/definitions/.
2. Keep the definition compatible with the shared token model.
3. Export it from constants/themes/index.ts.
4. Register/select it through AppThemeRegistry.
5. Verify light/dark brightness, text contrast, and reduced-motion/large-text settings.

Relevant files

• constants/themes/index.ts
• constants/themes/app-theme.ts
• constants/themes/base/
• constants/themes/definitions/
• constants/theme-context.tsx
• store/preferences-store.ts for user appearance preferences