Theming

The theming system provides a comprehensive, centralized approach to styling your React Native app. The theme configuration is pre-defined in the craftrn-ui/themes folder, containing colors, spacing, and typography definitions that are integrated with Unistyles for seamless access across your entire application.

All components and templates are built on this unified theme configuration, ensuring consistency while simplifying maintenance. The system supports dynamic theme switching (such as light/dark mode) and is designed with accessibility in mind. Color contrasts meet WCAG guidelines, and all visual elements remain usable across different themes and user preferences, making your app accessible to everyone regardless of their visual abilities or device settings.

Theme Variants

CraftReactNative components & templates comes 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.

Color Tokens

The theme system uses semantic color tokens that adapt to the current theme variant and mode. This ensures consistent styling across your application while maintaining accessibility standards.

Border radius

Spacings

Text variants