Theming & UI

uniwind

We use uniwind which allows you to use standard Tailwind CSS classes in your React Native components. It provides a seamless developer experience by bringing the utility-first CSS framework to native mobile development.

For comprehensive documentation, visit the uniwind documentation.

1import { View, Text } from 'react-native';
2
3export function Card() {
4  return (
5    <View className="bg-white dark:bg-slate-900 p-6 rounded-xl shadow-sm">
6      <Text className="text-lg font-bold text-slate-900 dark:text-white">
7        Hello World
8      </Text>
9    </View>
10  );
11}

Platform Specific Styles

uniwind allows you to apply styles conditionally based on the platform using the ios:, android:, and web: prefixes. This is extremely useful for handling platform-specific UI nuances.

1<View className="p-4 ios:pt-12 android:pt-8 bg-white">
2  <Text className="text-base ios:font-semibold android:font-bold">
3    Platform Specific Padding & Font Weight
4  </Text>
5</View>

Responsive Design

Build responsive layouts that adapt to different screen sizes using standard Tailwind breakpoints.

1<View className="w-full md:w-1/2 lg:w-1/3 bg-blue-500">
2  <Text className="text-white">Responsive Width</Text>
3</View>

Dark Mode

Dark mode is supported out of the box. The app automatically detects the system theme, but you can also manually toggle it.

1import { useSelectedTheme } from '@/hooks/general/use-selected-theme';
2
3function ThemeToggle() {
4  const { selectedTheme, setSelectedTheme } = useSelectedTheme();
5  
6  return (
7    <Button onPress={() => setSelectedTheme(selectedTheme === 'dark' ? 'light' : 'dark')}>
8      {selectedTheme === 'dark' ? 'Switch to Light' : 'Switch to Dark'}
9    </Button>
10  );
11}

Custom Colors

The color palette is defined once in the @theme block of src/global.css (Tailwind CSS v4). A sync script (scripts/sync-colors.mjs) derives src/components/utilities/colors.ts from it, so runtime consumers (placeholders, theme colors) can never drift from the Tailwind/Uniwind classes.

• Edit the palette in src/global.css — that's the single source of truth.
• Run pnpm sync:colors to regenerate colors.ts, or pnpm sync:colors:check to fail CI when the two are out of sync.
• Classes like bg-primary-600 and the colors object stay in lockstep automatically.

1@import 'tailwindcss';
2@import 'uniwind';
3
4@theme {
5  /* Primary */
6  --color-primary-50: #ffe2cc;
7  --color-primary-100: #ffc499;
8  --color-primary-200: #ffa766;
9  --color-primary-300: #ff984c;
10  --color-primary-400: #ff8933;
11  --color-primary-500: #ff7b1a;
12  --color-primary-600: #ff6c00;
13  /* ... */
14}