React Native Custom Theme

Custom theme system for react native

React native custom theme is the library which enable your app to support multiple themes.

Supported platforms

• iOS
• Android

Installation

npm install react-native-custom-theme

The solution is implemented in JavaScript so no native module linking is required

How to use

Create theme object for light and dark theme Colors.js

import {Theme} from 'react-native-custom-theme';
export const light: Theme = {
  mode: 'light',
  primary: '#4e9cdb',
  secondary: '#4e9cdb',
  background: '#ffffff',
};

export const dark: Theme = {
  mode: 'dark',
  primary: '#0a5897',
  secondary: '#0a5897',
  background: '#000000',
};

Wrap your app within ThemeProvider. ThemeProvider require light and dark theme objects as props

import React from 'react';
import ThemeProvider from 'react-native-custom-theme';
import {dark, light} from './Colors';
import Home from './Home';

const App = () => {
  return (
    <ThemeProvider darkTheme={dark} lightTheme={light}>
      <Home />
    </ThemeProvider>
  );
};

export default App;

Import useTheme hook and use theme and isDarkTheme variables to set your colors.

-- other imports ---
import {useTheme} from 'react-native-custom-theme';

const Home = () => {
    const {theme, isDarkTheme} = useTheme();

    const backgroundStyle = {
        backgroundColor: theme.background,
        flex: 1,
    };

  const textStyle = {
    color: isDarkTheme ? '#fff' : '#000',
  };
  
  return (
      <View style={backgroundStyle}>
        <Text style={textStyle}>React Native Custom Theme</Text>
      </View>
}

To change theme use setTheme method from useTheme hook

-- other imports ---
import {ThemeModes, useTheme} from 'react-native-custom-theme';

const Settings () => {
    const {themeMode, setTheme} = useTheme();
    
    const onPress = () => {
        setTheme(ThemeModes.DARK);
    }
    
    return (
        <View>
            <TouchableOpacity onPress={onPress}>
                <Text>Change to dark theme</Text>
            </TouchableOpacity>
        </View>
}

API

ThemeProvider

Property | Type | Description --- | --- | --- | darkTheme | Theme | This object contain colors values for dark theme lightTheme | Theme | This object contain colors values for light theme

useTheme

const {theme, isDarkTheme, themeMode, setTheme} = useTheme();

Property | Type | Description --- | --- | --- | theme | Theme | This object contain colors values for current selected theme isDarkTheme | boolean | true if selected theme is dark else false themeMode | ThemeModes.LIGHTThemeModes.DARKThemeModes.DEVICE_THEME | Mode to apply theme setTheme | function | set new theme, it takes new theme mode as parameter

Theme

• mode - 'light' or 'dark',
• [colorName]: [colorValue]

ThemeModes

• LIGHT
• DARK
• DEVICE_THEME

Authors

• Balveer Dhanoriya

Contributing

Pull requests are most welcome! Don't forget to add a title and a description that explain the issue you're trying to solve and your suggested solution. Screenshots and gifs are VERY helpful. Please do NOT format the files as we are trying to keep a unified syntax and the reviewing process fast and simple.

License

MIT