react-native-custom-theme

0.0.4 • Public • Published

React Native Custom Theme

Custom theme system for react native

Build Status

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.LIGHT
ThemeModes.DARK
ThemeModes.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

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.4
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.4
    0
  • 0.0.3
    0
  • 0.0.2
    0

Package Sidebar

Install

npm i react-native-custom-theme

Weekly Downloads

0

Version

0.0.4

License

MIT

Unpacked Size

12 kB

Total Files

9

Last publish

Collaborators

  • estbalveer