Skip to main content

Theming

Centralized theme system in constants/theme.ts.

Colors

export const colors = {
  accent: '#5A70E0',
  background: '#FFFFFF',
  text: '#000000',
  textSecondary: '#666666',
  border: '#E5E5E5',
  error: '#FF3B30',
  success: '#34C759',
};

Spacing

export const spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
};

Usage

import { colors, spacing } from '@/constants/theme';

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.background,
    padding: spacing.md,
  },
});

Adding Dark Mode

  1. Create dark colors
  2. Create ThemeContext
  3. Use useColorScheme() hook