🎨 Colors

Theme configuration for ExpoBase using NativeWind CSS variables.

🔧 Theme Setup

ExpoBase uses NativeWind with CSS variables for theming. The theme system automatically switches between light and dark modes.

Theme Configuration File

Go to /constants/colors.ts:

import { vars } from 'nativewind';
 
export const themes = {
  light: vars({
    '--background': '0 0% 100%',
    '--foreground': '20 14.3% 4.1%',
    '--card': '0 0% 100%',
    '--card-foreground': '20 14.3% 4.1%',
    '--popover': '0 0% 100%',
    '--popover-foreground': '20 14.3% 4.1%',
    '--primary': '24.6 95% 53.1%',
    '--primary-foreground': '60 9.1% 97.8%',
    '--secondary': '60 4.8% 95.9%',
    '--secondary-foreground': '25 5.3% 44.7%',
    '--muted': '60 4.8% 95.9%',
    '--muted-foreground': '25 5.3% 44.7%',
    '--accent': '60 4.8% 95.9%',
    '--accent-foreground': '24 9.8% 10%',
    '--destructive': '0 84.2% 60.2%',
    '--destructive-foreground': '60 9.1% 97.8%',
    '--border': '20 5.9% 90%',
    '--input': '20 5.9% 90%',
    '--ring': '24.6 95% 53.1%',
  }),
  dark: vars({
    '--background': '20 14.3% 4.1%',
    '--foreground': '60 9.1% 97.8%',
    '--card': '20 14.3% 4.1%',
    '--card-foreground': '60 9.1% 97.8%',
    '--popover': '20 14.3% 4.1%',
    '--popover-foreground': '60 9.1% 97.8%',
    '--primary': '20.5 90.2% 48.2%',
    '--primary-foreground': '60 9.1% 97.8%',
    '--secondary': '12 6.5% 15.1%',
    '--secondary-foreground': '60 9.1% 97.8%',
    '--muted': '12 6.5% 15.1%',
    '--muted-foreground': '24 5.4% 63.9%',
    '--accent': '12 6.5% 15.1%',
    '--accent-foreground': '60 9.1% 97.8%',
    '--destructive': '0 72.2% 50.6%',
    '--destructive-foreground': '60 9.1% 97.8%',
    '--border': '12 6.5% 15.1%',
    '--input': '12 6.5% 15.1%',
    '--ring': '20.5 90.2% 48.2%',
  }),
};

📱 Usage

1. Use CSS Classes

// Using theme colors with NativeWind classes
export const Card = ({ children }) => {
  return (
    <View className="bg-card border border-border rounded-lg p-4">
      <Text className="text-card-foreground">
        {children}
      </Text>
    </View>
  );
};

2. Common Theme Classes

// Background colors
className="bg-background"     // Main background
className="bg-card"           // Card background
className="bg-muted"          // Muted background
className="bg-primary"        // Primary background
 
// Text colors
className="text-foreground"   // Main text
className="text-muted-foreground" // Muted text
className="text-primary-foreground" // Primary text
 
// Borders
className="border-border"     // Default border
className="border-input"      // Input border

🎨 Customization

Change Theme Colors

To modify colors, edit the HSL values in the theme object:

// Example: Change primary color
'--primary': '142 76% 36%',        // Green instead of orange
'--primary-foreground': '355 7% 97%', // Light text on green

Add Custom Colors

export const themes = {
  light: vars({
    // ... existing colors
    '--custom': '200 100% 50%',      // Custom blue
    '--custom-foreground': '0 0% 100%', // White text
  }),
  // ... dark theme
};

🎨 Theme System Ready ✅

NativeWind CSS variables with light/dark mode!