Brand Colors

🎨 Overview

Kagome uses a theme-based color system stored in src/lib/theme.ts. Colors are applied through NativeWind classes and React Navigation theming.

📝 Update Colors

1. Open Theme File

nano src/lib/theme.ts

2. Modify Colors

Update the THEME object with your brand colors:

export const THEME = {
  light: {
    primary: '#YOUR_BRAND_COLOR',    // Main brand color
    primaryForeground: '#FFFFFF',     // Text on primary
    secondary: '#YOUR_SECONDARY',     // Secondary actions
    accent: '#YOUR_ACCENT',           // Highlights/links
    destructive: '#ERROR_COLOR',      // Error states
    // ... other colors as needed
  },
  dark: {
    primary: '#YOUR_BRAND_COLOR',    // Same or adjusted for dark
    // ... mirrored light theme structure
  }
}

3. Common Color Updates

Minimal Update:

light: {
  primary: '#1E847B',      // Your brand teal
  accent: '#936F00',       // Your brand gold
}
dark: {
  primary: '#1E847B',      // Keep consistent
  accent: '#936F00',       // Keep consistent
}

🔍 Preview Changes

Theme Selector

Use the built-in theme selector to switch between light and dark modes:

import { ThemeSelector } from '@/components/ui/theme-selector'

// Add to your app header/navigation
<ThemeSelector />

Test Both Themes

# Run app and switch between light/dark modes
npx react-native run-ios    # or run-android

⚠️ Troubleshooting

Colors not updating?

• Clear Metro bundler cache: npx react-native start --reset-cache
• Restart the app completely
• Verify theme imports are correct

Theme not persisting?

• Check that ThemeSelector is rendering
• Verify storage configuration in src/storage/

Colors look different on device?

• Test on actual devices/emulators
• Check for theme provider wrapping entire app

📱 Platform Notes

• Android: Colors apply to StatusBar/NavigationBar via React Navigation
• iOS: System bars use React Navigation defaults (can be customized)
• Components: Use NativeWind classes like bg-primary, text-accent

✅ Next Steps

After updating brand colors:

1. Test both light and dark themes
2. Update app icons to match new color scheme
3. Refresh splash screens if needed