Styling & Theming

Tailwind + NativeWind

The native app uses NativeWind, so you style screens with Tailwind-style className attributes. The configuration lives in apps/native/tailwind.config.js and already exposes semantic tokens (e.g., bg-primary-500, text-primary-foreground). Use the shared component library (apps/native/src/components/ui) to keep spacing, typography, and helpers consistent.

Shared color tokens

All the base colors are defined in apps/native/src/components/ui/colors.js. You can edit the primary, accent, background, and foreground palettes there and the changes flow through every UI component that uses the semantic tokens.

// update the primary palette to match your brand
export const palette = {
  primary: {
    900: '#0f172a',
    800: '#1e293b',
    500: '#4f46e5',
    400: '#6366f1',
  },
  // ... other colors
};

Tailwind then exposes bg-primary-500, text-primary-foreground, and similar helpers so you do not need to touch the config for simple rebrands.

useThemeConfig

When a native API or third-party library needs raw colors instead of className, useThemeConfig comes from apps/native/src/lib/use-theme-config.tsx. It returns { colors, spacing, radii, typography } that mirror the Tailwind tokens.

const theme = useThemeConfig();
const statusColor = theme.colors.primary;

Use className for layout/spacing and reach for useThemeConfig only when something (like StatusBar or a native module) needs concrete hex values.