Theme Registry

The Theme Registry is a powerful system for managing multiple theme presets in your application. It allows you to register, organize, and switch between different themes dynamically.

Overview

The registry acts as a centralized store for all your theme presets, providing:

Theme Management

Register and organize multiple theme presets with unique identifiers.

Dynamic Switching

Switch between registered themes at runtime with smooth transitions.

Persistence

Automatically persist active theme selection across app sessions.

Built-in Presets

Access pre-designed themes like Material, Neon, Ocean, and more.

Theme Discovery

List, search, and preview available themes in your registry.

Basic Usage

Importing the Registry

import { themeRegistry } from 'rnc-theme';

Registering Themes

Static Theme

import { themeRegistry } from 'rnc-theme';

// Register a static theme object
themeRegistry.registerPreset('corporate', {
  colors: {
    primary: '#1E40AF',
    secondary: '#374151',
    background: '#F9FAFB',
    surface: '#FFFFFF',
    text: '#111827',
    textSecondary: '#6B7280',
    border: '#D1D5DB',
    error: '#DC2626',
    warning: '#D97706',
    success: '#059669',
    info: '#2563EB',
    muted: '#9CA3AF',
    accent: '#059669',
    destructive: '#B91C1C',
  },
  // ...rest
});

Dynamic Theme

import { themeRegistry, CustomThemeConfigFactory } from 'rnc-theme';

// Register a dynamic theme factory
const createNeonTheme: CustomThemeConfigFactory = (isDark: boolean) => ({
  colors: {
    primary: '#00FF88',
    secondary: '#FF0080',
    background: isDark ? '#0A0A0A' : '#FFFFFF',
    surface: isDark ? '#1A1A1A' : '#F5F5F5',
    text: isDark ? '#00FF88' : '#000000',
    textSecondary: isDark ? '#80FF80' : '#666666',
    border: isDark ? '#333333' : '#E0E0E0',
    error: '#FF4444',
    warning: '#FFAA00',
    success: '#00FF88',
    info: '#0088FF',
    muted: isDark ? '#666666' : '#999999',
    accent: '#FF0080',
    destructive: '#FF4444',
  },
  // ...rest
});

themeRegistry.registerPreset('neon', createNeonTheme);

Built-in Theme Presets

RNC Theme comes with several pre-registered theme presets:

Material

material

Google Material Design inspired theme with clean, modern aesthetics.

Neon

neon

High-contrast cyberpunk theme with electric colors.

Ocean

ocean

Calming blue and teal tones inspired by ocean depths.

Sunset

sunset

Warm oranges and pinks reminiscent of sunset skies.

Forest

forest

Natural earth tones and greens inspired by nature.

Galaxy

galaxy

Deep space colors with cosmic purple and blue hues.

Vintage

vintage

Muted, classic colors with retro aesthetic.

Cyberpunk

cyberpunk

Futuristic high-tech theme with neon accents.

Pastel

pastel

Soft, gentle colors perfect for calm interfaces.

Monochrome

monochrome

Black and white minimalist design.

Autumn

autumn

Warm fall colors with orange and brown tones.

Arctic

arctic

Cool blues and whites inspired by arctic landscapes.

Using Built-in Presets

import { useTheme } from 'rnc-theme';

function ThemeSelector() {
  const { updateCustomTheme, Button, ButtonText } = useTheme();

  const handlePreset = () =>
    updateCustomTheme(
      isDark ? presetThemes[2].config(true) : presetThemes[2].config(false),
      presetThemes[2].key,
      presetThemes[2].config
    );

  return (
    <View>
      <Button onPress={handlePreset}>
        <ButtonText>
          Preset Theme
        </ButtonText>
      </Button>
    </View>
  );
}

Registry Operations

Listing Registered Themes

import { themeRegistry } from 'rnc-theme';

const App = () => {
  // List all registered presets
  console.log(themeRegistry.getAllPresets());

  // Check if a preset is registered
  console.log(themeRegistry.hasPreset('neon'));

  // Get preset theme config
  console.log(themeRegistry.getPreset('neon'));
}

Removing Themes

// Remove a single theme
themeRegistry.deletePreset('oldTheme');

// Clear everything
themeRegistry.clearPresets();

Troubleshooting

Common Issues

Theme Not Found

Problem: setActivePreset('mytheme') doesn’t work

Solutions:

// Check if theme is registered
if (!themeRegistry.hasPreset('mytheme')) {
  console.error('Theme not found:', 'mytheme');
  console.log('Available themes:', themeRegistry.list());
}

// Register the theme first
useEffect(()=>{
  themeRegistry.registerPreset('mytheme', myThemeConfig);
},[])

Theme Conflicts

Problem: Themes overriding each other

Solutions:

// Use unique names
themeRegistry.registerPreset('company-dark-v2', theme);

// Check before registering
if (themeRegistry.has('mytheme')) {
  console.warn('Theme already exists, using different name');
  themeRegistry.registerPreset('mytheme-v2', theme);
}

API Reference

Need more details?

Check out our API reference documentation for complete details on registry types.