Color System

Colors in Reactnatively are organized into three layers: the raw palette, the semantic theme colors, and the glass-specific tint and border values. Components always reference semantic colors — never raw hex.

Semantic color tokens

These tokens adapt to light and dark mode automatically. Override them in createTheme to brand the entire component library at once.

Token	Use case
primary	Brand / main interactive color
secondary	Supporting interactive color
accent	Highlight / promotional color
success	Positive / complete state
warning	Caution / attention state
error	Error / destructive state
info	Informational / neutral state
neutral	Muted / secondary UI elements

Overriding colors

theme.ts

1import { createTheme } from 'reactnatively/theme';23export const theme = createTheme({4  colors: {5    // All Button, Badge, Chip, etc. pick this up automatically6    primary:   '#6366f1',7    secondary: '#8b5cf6',8    success:   '#10b981',9    error:     '#ef4444',10  },11});

Raw palette

The base palette contains the full spectrum for each hue. Import it directly when you need a specific shade in a component:

typescript

import { palette } from 'reactnatively/theme';

// palette.violet[500]   → '#8b5cf6'
// palette.blue[600]     → '#2563eb'
// palette.emerald[400]  → '#34d399'
// palette.rose[500]     → '#f43f5e'

// Use in StyleSheet.create for static styles
const styles = StyleSheet.create({
  badge: { backgroundColor: palette.emerald[500] },
});

Using colors in your components

StatusDot.tsx

1import { useTheme } from 'reactnatively';2import { View } from 'react-native';34type StatusDotProps = {5  status: 'active' | 'warning' | 'error';6};78export function StatusDot({ status }: StatusDotProps) {9  const { theme } = useTheme();1011  const color = {12    active:  theme.colors.success,13    warning: theme.colors.warning,14    error:   theme.colors.error,15  }[status];1617  return (18    <View style={{19      width: 8,20      height: 8,21      borderRadius: 4,22      backgroundColor: color,23    }} />24  );25}

Glass colors

Glass surfaces use rgba values, not semantic color tokens. The tint and border colors are in glassTokens and adapt to light/dark mode by colorScheme key:

typescript

import { glassTokens } from 'reactnatively/theme';

// glassTokens.tint.dark.surface     → 'rgba(255,255,255,0.042)'
// glassTokens.tint.light.surface    → 'rgba(255,255,255,0.055)'
// glassTokens.border.dark.medium    → 'rgba(255,255,255,0.075)'
// glassTokens.highlight.medium      → 'rgba(255,255,255,0.18)'