@loudpacks/theme-native

React Native theme picker modal with live theme previews.

Installation

npm install @loudpacks/theme-native @loudpacks/theme-core
# or
pnpm add @loudpacks/theme-native @loudpacks/theme-core
# or
yarn add @loudpacks/theme-native @loudpacks/theme-core

Requirements

• React ≥18.0.0
• React Native ≥0.72.0

Features

• 🎨 Live theme previews with light/dark mode toggle
• 📱 Native Modal with slide animation
• 🎯 Auto-derives modal colors from current theme
• 🔄 Pressable theme cards with visual feedback
• 📐 Safe area handling for iOS notches
• ♿ Full accessibility support with native components
• ✅ Fully tested with 25+ test cases

Usage

import { ThemePickerModal } from '@loudpacks/theme-native';
import type { ThemeDefinitions } from '@loudpacks/theme-core';

const themes: ThemeDefinitions = {
  monochrome: {
    displayName: 'Monochrome',
    description: 'Clean monochrome design',
    light: {
      background: '#fafafa',
      surface: '#ffffff',
      text: '#1a1a1a',
      // ... other color definitions
    },
    dark: {
      background: '#121212',
      surface: '#1e1e1e',
      text: '#f5f5f5',
      // ... other color definitions
    },
  },
  // ... more themes
};

function App() {
  const [showPicker, setShowPicker] = useState(false);
  const [currentTheme, setCurrentTheme] = useState('monochrome');
  const [colorScheme, setColorScheme] = useState<'light' | 'dark'>('light');

  const currentColors = themes[currentTheme][colorScheme];

  return (
    <>
      <Button
        title="Change Theme"
        onPress={() => setShowPicker(true)}
      />

      <ThemePickerModal
        visible={showPicker}
        onClose={() => setShowPicker(false)}
        currentTheme={currentTheme}
        onSelectTheme={setCurrentTheme}
        themes={themes}
        initialPreviewMode={colorScheme}
        currentColors={{
          background: currentColors.background,
          text: currentColors.text,
          border: currentColors.border,
          tint: currentColors.tint,
        }}
        config={{
          showPreviewToggle: true,
          closeOnSelect: true,
        }}
      />
    </>
  );
}

Components

ThemePickerModal

The main modal component for selecting themes.

Props:

• visible (boolean): Controls modal visibility
• onClose (() => void): Callback when modal is closed
• currentTheme (string): Currently selected theme key
• onSelectTheme ((themeKey: string) => void): Callback when theme is selected
• themes (ThemeDefinitions): Object containing all available themes
• initialPreviewMode ('light' | 'dark', optional): Initial preview mode
• headerTitle (string, optional): Modal header text
• currentColors (object): Current theme colors for styling the modal
• config (object, optional): Configuration options

ThemeCard

Individual theme preview card component.

Props:

• themeKey (string): Theme identifier
• theme (ThemeMetadata): Theme data
• isSelected (boolean): Whether this theme is currently selected
• previewMode ('light' | 'dark'): Which color scheme to preview
• onSelect (() => void): Callback when card is pressed

Configuration Options

{
  showPreviewToggle: boolean;  // Show light/dark toggle (default: true)
  closeOnSelect: boolean;      // Close modal after selection (default: false)
  gridColumns: number;         // Number of columns (default: 2)
}

Examples

See the examples directory for complete working examples including:

• Basic theme picker setup
• Persistent theme storage with AsyncStorage
• System color scheme detection

License

MIT