@umituz/react-native-design-system-theme

Theme management system for React Native apps - Colors, design tokens, and theme state management.

Installation

npm install @umituz/react-native-design-system-theme

Peer Dependencies

• react >= 18.2.0
• react-native >= 0.74.0
• zustand >= 5.0.2
• @react-native-async-storage/async-storage >= 1.21.0

Usage

Basic Usage

import { useAppDesignTokens, useDesignSystemTheme } from '@umituz/react-native-design-system-theme';

const MyComponent = () => {
  const tokens = useAppDesignTokens();
  const { themeMode, setThemeMode } = useDesignSystemTheme();

  return (
    <View style={{
      backgroundColor: tokens.colors.primary,
      padding: tokens.spacing.md
    }}>
      <Text style={tokens.typography.bodyLarge}>Hello!</Text>
    </View>
  );
};

Syncing with App Theme

import { useDesignSystemTheme } from '@umituz/react-native-design-system-theme';

// In your app's theme provider
const AppThemeProvider = ({ children }) => {
  const [themeMode, setAppThemeMode] = useState('light');
  const { setThemeMode } = useDesignSystemTheme();

  useEffect(() => {
    setThemeMode(themeMode);
  }, [themeMode, setThemeMode]);

  return (
    <YourAppThemeContext.Provider value={{ themeMode, setThemeMode: setAppThemeMode }}>
      {children}
    </YourAppThemeContext.Provider>
  );
};

API

Hooks

• useAppDesignTokens() - Get theme-aware design tokens
• useDesignSystemTheme() - Get/set theme mode

Colors

• lightColors - Light theme color palette
• darkColors - Dark theme color palette
• getColorPalette(mode) - Get color palette for theme mode
• withAlpha(hexColor, alpha) - Add alpha transparency to hex color

Token Factory

• createDesignTokens(mode, customColors?) - Create complete design tokens for theme mode

Types

• ThemeMode - 'light' | 'dark'
• ColorPalette - Color palette type
• DesignTokens - Complete design tokens type

License

MIT