Colors

The color system in CraftReactNative is built on a foundation of semantic color tokens that adapt to your chosen theme variant and mode. This ensures consistent styling across your application while maintaining accessibility standards.

Color palette

The base color palette includes a comprehensive set of colors organized into categories:

Color tokens

The theme system uses semantic color tokens that adapt to the current theme variant and mode. Instead of using raw color values, components reference semantic tokens like interactivePrimary, contentPrimary, or backgroundScreen. This abstraction allows the entire app to switch themes seamlessly while maintaining proper contrast and accessibility.

Token categories

Using color tokens

When building your own components or customizing existing ones, always use semantic color tokens from the theme rather than hardcoded color values. This ensures your components will automatically adapt to theme changes and maintain accessibility standards.

import { StyleSheet } from 'react-native-unistyles';
import { View, Text } from 'react-native';
 
const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello</Text>
    </View>
  );
};
 
const styles = StyleSheet.create(theme => ({
  container: {
    backgroundColor: theme.colors.backgroundScreen,
    padding: theme.spacing.medium,
  },
  text: {
    color: theme.colors.contentPrimary,
  },
}));

Note: The theme is automatically available inside StyleSheet.create functions. Styles update automatically when the theme changes without causing component re-renders.

Theme variants

CraftReactNative components & templates come with 2 theme variants:

• Teal Theme: A calming blue-green color scheme
• Orange Theme: A warm and energetic orange color scheme

Each theme variant includes both light and dark modes for optimal usability in different lighting conditions. All color tokens automatically adapt when switching between variants and modes.

Accessibility

All color combinations in the theme system are designed with WCAG (Web Content Accessibility Guidelines) in mind, aiming to ensure that text remains readable and interactive elements are clearly distinguishable across all theme variants and modes.

Related guides

For information about other design tokens, see:

• Typography - Text variants and typography system
• Spacing - Spacing tokens for padding, margins, and gaps
• Border Radius - Border radius tokens for rounded corners