@netclues/react-native-netclues-theme v0.1.0

react-native-netclues-theme

This package provides a predefined set of color themes for React Native applications, allowing easy switching between themes and storage of the selected theme. It also includes functions to get the current theme, set a new theme, and retrieve all available themes.

Features

• Predefined Themes: Includes multiple color themes with support for both light and dark modes.
• Storage Integration: Saves the selected theme to storage and retrieves it automatically.
• Customizable: Easily extend or modify predefined themes.

Installation

npm install @netclues/react-native-netclues-theme

or using yarn:

yarn add @netclues/react-native-netclues-theme

Usage

Importing the Package

To use the theme manager, you need to import the relevant functions and themes into your React Native project.

import { themes, getAllThemes, setThemeColorsData, getSelectedThemeData } from '@netclues/react-native-netclues-theme';

Getting All Themes

You can retrieve all predefined themes using the getAllThemes function.

const allThemes = getAllThemes();
console.log(allThemes);

Setting and Getting a Theme

To set a theme and save it to storage:

const selectedTheme = setThemeColorsData('blue');
console.log(selectedTheme);

To retrieve the currently selected theme:

const currentTheme = getSelectedThemeData();
console.log(currentTheme);

Using Themes in Components

You can use the selected theme in your components to style them according to the selected theme's color scheme.

import { StyleSheet, View, Text } from 'react-native';
import { getSelectedThemeData } from '@netclues/react-native-netclues-theme';

const theme = getSelectedThemeData();

const App = () => {
  return (
    <View style={[styles.container, { backgroundColor: theme?.colors.background }]}>
      <Text style={{ color: theme?.colors.text }}>Hello, Themed World!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

Available Themes

The package includes the following predefined themes:

• Red
• Pink
• Purple
• Deep Purple
• Indigo
• Blue
• Light Blue
• Cyan
• Teal
• Green
• Light Green
• Lime
• Yellow
• Amber
• Orange
• Deep Orange
• Brown
• Grey
• Default

License

MIT