Package Exports

@hd-app-modules/theme
@hd-app-modules/theme/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hd-app-modules/theme) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@hd-app-modules/theme

A React Native hook for managing app theme with persistent storage and system theme detection using Zustand for state management.

Installation

npm install @hd-app-modules/theme

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react react-native zustand

Usage

Basic Setup

First, configure the storage instance (recommended to use AsyncStorage):

import AsyncStorage from '@react-native-async-storage/async-storage';
import { setThemeStorage } from '@hd-app-modules/theme';

// Configure storage at app startup
setThemeStorage(AsyncStorage);

Initialize Theme System

import React from 'react';
import { useAppThemeColor } from '@hd-app-modules/theme';

const App = () => {
  const { themeColorLoaded } = useAppThemeColor();
  
  if (!themeColorLoaded) {
    return <LoadingScreen />;
  }

  return <MainApp />;
};

Using Theme in Components

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useThemeColor } from '@hd-app-modules/theme';

const MyComponent = () => {
  const { themeColor, setThemeColor } = useThemeColor();
  
  const toggleTheme = () => {
    setThemeColor(themeColor === 'light' ? 'dark' : 'light');
  };

  return (
    <View style={[styles.container, { 
      backgroundColor: themeColor === 'light' ? '#fff' : '#000' 
    }]}>
      <Text style={{ 
        color: themeColor === 'light' ? '#000' : '#fff' 
      }}>
        Current theme: {themeColor}
      </Text>
      <Button onPress={toggleTheme} title="Toggle Theme" />
    </View>
  );
};

Custom Storage Implementation

You can provide your own storage implementation:

import { setThemeStorage } from '@hd-app-modules/theme';

const customStorage = {
  getItem: async (key: string) => {
    // Your custom get implementation
    return localStorage.getItem(key);
  },
  setItem: async (key: string, value: string) => {
    // Your custom set implementation
    localStorage.setItem(key, value);
  }
};

setThemeStorage(customStorage);

API Reference

`setThemeStorage(storage)`

Configure the storage instance for theme persistence.

Parameters

storage (StorageInterface): Storage implementation with getItem and setItem methods

Example

import AsyncStorage from '@react-native-async-storage/async-storage';
import { setThemeStorage } from '@hd-app-modules/theme';

setThemeStorage(AsyncStorage);

`useAppThemeColor(props?)`

Hook for initializing the theme system with system theme detection.

Parameters

props (any, optional): Optional configuration

Returns

Object with the following properties:

themeColorLoaded (boolean): Whether the theme has been loaded from storage

`useThemeColor(props?)`

Hook for managing theme color state.

Parameters

props (any, optional): Optional configuration

Returns

Object with the following properties:

themeColor ('light' | 'dark'): Current theme color
setThemeColor (function): Function to change theme color

Features

System Theme Detection

Automatically detects system color scheme (light/dark)
Uses system theme as default when no saved preference exists

Persistent Storage

Saves user theme preference to storage
Restores theme on app restart
Configurable storage backend (AsyncStorage, custom implementations)

State Management

Uses Zustand for efficient state management
Global theme state accessible throughout the app
Automatic re-renders when theme changes

TypeScript Support

Full TypeScript support with proper type definitions
Type-safe theme values ('light' | 'dark')

Theme Integration Patterns

With Styled Components

import styled from 'styled-components/native';
import { useThemeColor } from '@hd-app-modules/theme';

const Container = styled.View<{ theme: 'light' | 'dark' }>`
  background-color: ${props => props.theme === 'light' ? '#fff' : '#000'};
  flex: 1;
`;

const MyComponent = () => {
  const { themeColor } = useThemeColor();
  
  return (
    <Container theme={themeColor}>
      {/* Your content */}
    </Container>
  );
};

With Style Objects

import { useThemeColor } from '@hd-app-modules/theme';

const MyComponent = () => {
  const { themeColor } = useThemeColor();
  
  const styles = StyleSheet.create({
    container: {
      backgroundColor: themeColor === 'light' ? '#ffffff' : '#000000',
      flex: 1,
    },
    text: {
      color: themeColor === 'light' ? '#000000' : '#ffffff',
    },
  });

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Themed content</Text>
    </View>
  );
};

Storage Requirements

The storage instance must implement the following interface:

interface StorageInterface {
  getItem: (key: string) => Promise<string | null>;
  setItem: (key: string, value: string) => Promise<void>;
}

License

ISC