Styling & Theming

VibeFast uses NativeWind to bring the power and developer experience of Tailwind CSS to React Native. This allows for rapid, consistent, and maintainable styling.

Overview

• NativeWind: All styling is done using utility classes directly in the className prop of your components.
• Custom Theme: The theme is defined in tailwind.config.js, which consumes a rich color palette from src/components/ui/colors.js.
• Dark Mode: Handled automatically. The app uses a class-based dark mode strategy, managed by the useThemeConfig hook.

How-To: Apply Styles to a Component

Styling is as simple as adding Tailwind CSS classes to the className prop.

import { Pressable, Text } from 'react-native';

export const Button = () => {
  return (
    <Pressable className="my-2 items-center justify-center rounded-2xl bg-black p-4 dark:bg-white">
      <Text className="font-semibold text-white dark:text-black">
        Click Me
      </Text>
    </Pressable>
  );
};

• The dark: prefix is used to apply styles specifically for dark mode.
• NativeWind compiles these utility classes into an optimized StyleSheet at build time.

How-To: Add a New Custom Color

The color palette is centralized for easy customization.

module.exports = {
  // ... existing colors
  brand: {
    50: '#E0F2FE',
    100: '#BAE6FD',
    // ...
    500: '#0EA5E9',
    // ...
    900: '#0C4A6E',
  },
  // ...
};

const colors = require('./src/components/ui/colors');

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...
  theme: {
    extend: {
      colors, // This imports all colors from your colors.js file
    },
  },
  // ...
};

<View className="bg-brand-500 p-4">
  <Text className="text-brand-50">New Brand Color!</Text>
</View>

How-To: Use Theming Logic

For more complex cases where you need programmatic access to theme colors (e.g., for non-NativeWind libraries), you can use the useThemeConfig hook.

import { useThemeConfig } from '@/lib/use-theme-config';

export default function PromoBanner() {
  const theme = useThemeConfig();

  return (
    <View
      style={{
        backgroundColor: theme.colors.muted,
        borderColor: theme.colors.border,
      }}
    >
      <Text style={{ color: theme.colors.destructive }}>
        80% off
      </Text>
    </View>
  );
}