Theming Overview

RNC Theme is a comprehensive theming system designed for React Native applications. It provides type-safe, dynamic theme switching with extensive customization capabilities.

Key Features

Type-Safe Theming

Full TypeScript support with intelligent autocomplete for all theme properties and values.

Dynamic Theme Switching

Seamless switching between light, dark, and system themes with smooth animations.

High Customization

Extensive customization options for colors, typography, spacing, and component styles.

Persistent Storage

Automatic theme persistence across app sessions with AsyncStorage integration.

Architecture Overview

The RNC Theme system is built around several core concepts:

Theme Structure

Every theme consists of five main categories:

colors: {
  primary: string;
  secondary: string;
  background: string;
  surface: string;
  text: string;
  textSecondary: string;
  border: string;
  error: string;
  warning: string;
  success: string;
  info: string;
  muted: string;
  accent: string;
  destructive: string;
}

typography: {
  caption: { fontSize: number; lineHeight: number; fontWeight: string };
  small: { fontSize: number; lineHeight: number; fontWeight: string };
  body: { fontSize: number; lineHeight: number; fontWeight: string };
  subtitle: { fontSize: number; lineHeight: number; fontWeight: string };
  title: { fontSize: number; lineHeight: number; fontWeight: string };
  heading: { fontSize: number; lineHeight: number; fontWeight: string };
}

spacing: {
  xs: number;  // 4
  sm: number;  // 8
  md: number;  // 16
  lg: number;  // 24
  xl: number;  // 32
  xxl: number; // 48
}

components: {
  height: { xs: number; sm: number; md: number; lg: number; xl: number };
  padding: { xs: number; sm: number; md: number; lg: number; xl: number };
  borderRadius: { xs: number; sm: number; md: number; lg: number; xl: number; full: number };
}

fontSizes: {
  xs: number;  // 12
  sm: number;  // 14
  md: number;  // 16
  lg: number;  // 18
  xl: number;  // 20
  xxl: number; // 24
}

Core Components

Theme Provider

The RNCProvider is the root component that provides theme context to your entire application:

import { RNCProvider } from 'rnc-theme';

export default function App() {
  return (
    <RNCProvider defaultTheme="system">
      {/* Your app content */}
    </RNCProvider>
  );
}

Theme Hooks

Two primary hooks for accessing and using themes:

useTheme
useThemedStyles

import { useTheme } from 'rnc-theme';

function MyComponent() {
  const {
    theme,
    themeMode,
    setThemeMode,
    isDark,
    updateCustomTheme,
    resetTheme,
  } = useTheme();

  return (
    <View style={{ backgroundColor: theme.colors.background }}>
      <Text style={{ color: theme.colors.text }}>Hello World</Text>
    </View>
  );
}

import { useThemedStyles } from 'rnc-theme';

function MyComponent() {
  const styles = useThemedStyles(createStyles);

  return <View style={styles.container} />;
}

const createStyles = (theme: Theme) => ({
  container: {
    backgroundColor: theme.colors.background,
    padding: theme.spacing.md,
    borderRadius: theme.components.borderRadius.md,
  },
});

Theme Registry

Manage multiple theme presets with the theme registry:

import { themeRegistry } from 'rnc-theme';

// Register a custom theme
themeRegistry.registerPreset('myTheme', {
  colors: {
    primary: '#FF6B6B',
    secondary: '#4ECDC4',
    // ... other colors
  },
  // ... other theme properties
});

// Apply the theme
const { setActivePreset } = useTheme();
setActivePreset('myTheme');

Theme Modes

Supports three theme modes:

Light Mode: Optimized for bright environments
Dark Mode: Optimized for low-light environments
System Mode: Automatically follows device settings

const { themeMode,setThemeMode, } = useTheme();

// Switch to dark mode
setThemeMode('dark');

// Follow system preference
setThemeMode('system');

Performance Optimizations

Memoization

All theme calculations are memoized to prevent unnecessary re-renders:

const styles = useThemedStyles(createStyles); // Memoized automatically