Colors

A comprehensive color system with light and dark mode support, semantic colors, and utility functions for consistent theming across your React Native app.

Installation


pnpm dlx bna-ui add colors

Usage

import { Colors, withOpacity, semanticColors } from '@/theme/colors';

export function ThemedComponent() {
  const colorScheme = useColorScheme();
  const colors = Colors[colorScheme ?? 'light'];
 
  return (
    <View style={{ backgroundColor: colors.background }}>
      <Text style={{ color: colors.text }}>Hello World</Text>
    </View>
  );
}

Color Scheme

Light Mode Colors

The light color scheme provides a clean, modern appearance with high contrast for optimal readability.

Base Colors

background: Primary background color (#FFFFFF)
foreground: Primary text color (#000000)
card: Card background color (#F2F2F7)
cardForeground: Card text color (#000000)

Interactive Colors

primary: Primary brand color (#18181b)
primaryForeground: Primary text on brand color (#FFFFFF)
secondary: Secondary background (#F2F2F7)
secondaryForeground: Secondary text color (#18181b)

System Colors

blue: Default buttons, links (#007AFF)
green: Success states, completed tasks (#34C759)
red: Delete buttons, error states (#FF3B30)
orange: Warning states (#FF9500)
yellow: Notes app accent (#FFCC00)
pink: Pink accent color (#FF2D92)
purple: Purple accent (#AF52DE)
teal: Communication features (#5AC8FA)
indigo: System features (#5856D6)

Dark Mode Colors

The dark color scheme provides a comfortable viewing experience in low-light conditions.

Base Colors

background: Primary background color (#000000)
foreground: Primary text color (#FFFFFF)
card: Card background color (#1C1C1E)
cardForeground: Card text color (#FFFFFF)

Interactive Colors

primary: Primary brand color (#e4e4e7)
primaryForeground: Primary text on brand color (#18181b)
secondary: Secondary background (#1C1C1E)
secondaryForeground: Secondary text color (#FFFFFF)

System Colors

blue: Default buttons, links (#0A84FF)
green: Success states, completed tasks (#30D158)
red: Delete buttons, error states (#FF453A)
orange: Warning states (#FF9F0A)
yellow: Notes app accent (#FFD60A)
pink: Pink accent color (#FF375F)
purple: Purple accent (#BF5AF2)
teal: Communication features (#64D2FF)
indigo: System features (#5E5CE6)

API Reference

Colors

Main color export containing light and dark color schemes.

const Colors = {
  light: lightColors,
  dark: darkColors,
};

withOpacity

Utility function to add opacity to colors.

Parameters

Name	Type	Description
`color`	`string`	The color to add opacity to
`opacity`	`number`	Opacity value between 0 and 1

Returns

Type	Description
`string`	Color with opacity applied (rgba format)

Example

import { withOpacity, Colors } from '@/theme/colors';
 
const semi_transparent_blue = withOpacity(Colors.light.blue, 0.5);
// Returns: "rgba(0, 122, 255, 0.5)"

ColorKeys

TypeScript type for all available color keys.

type ColorKeys = keyof typeof lightColors;

Usage Examples

Basic Themed Component

import { Colors } from '@/theme/colors';
import { useColorScheme } from '@/hooks/useColorScheme';
 
export function BasicThemedComponent() {
  const colorScheme = useColorScheme();
  const colors = Colors[colorScheme ?? 'light'];
 
  return (
    <View style={{ backgroundColor: colors.background, padding: 16 }}>
      <Text style={{ color: colors.text, fontSize: 18 }}>
        Welcome to the app
      </Text>
      <View
        style={{
          backgroundColor: colors.card,
          padding: 12,
          borderRadius: 8,
          marginTop: 16,
        }}
      >
        <Text style={{ color: colors.cardForeground }}>
          This is a card component
        </Text>
      </View>
    </View>
  );
}

Using withOpacity Utility

import { Colors, withOpacity } from '@/theme/colors';
import { useColorScheme } from '@/hooks/useColorScheme';
 
export function OverlayComponent() {
  const colorScheme = useColorScheme();
  const colors = Colors[colorScheme ?? 'light'];
 
  return (
    <View style={{ position: 'relative' }}>
      <Image source={{ uri: 'https://example.com/image.jpg' }} />
      <View
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: withOpacity(colors.background, 0.8),
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Text style={{ color: colors.text, fontSize: 24 }}>
          Overlay Content
        </Text>
      </View>
    </View>
  );
}

Best Practices

Color Consistency

Always use the color system instead of hardcoded colors to ensure consistency across your app and proper support for both light and dark modes.

// ✅ Good - uses theme colors
const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.background,
  },
  text: {
    color: colors.text,
  },
});
 
// ❌ Bad - hardcoded colors
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFFFFF',
  },
  text: {
    color: '#000000',
  },
});

Semantic Usage

Use semantic colors for status indicators and system feedback to maintain consistency with platform conventions.

// ✅ Good - semantic colors
<Text style={{ color: semanticColors.light.success }}>
  Operation completed successfully
</Text>
 
// ❌ Bad - arbitrary green
<Text style={{ color: '#00FF00' }}>
  Operation completed successfully
</Text>

Performance Considerations

The color objects are static and can be safely memoized or cached. Consider using React.memo for components that only change based on color scheme.

const ThemedComponent = React.memo(({ colorScheme }) => {
  const colors = Colors[colorScheme];
  // Component implementation
});

Accessibility

The color system is designed with accessibility in mind, providing sufficient contrast ratios between foreground and background colors. The semantic colors also follow platform conventions for better user experience.

When creating custom color combinations, ensure they maintain proper contrast ratios for accessibility compliance (minimum 4.5:1 for normal text, 3:1 for large text).

Platform Compatibility

The color system follows iOS design guidelines and adapts automatically to system-level appearance changes. Colors are optimized for both light and dark modes across all supported platforms.

Theme Globals