Nunjucks Powers Mozilla

    react-native-custom-theme

    0.0.3 • 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

    Install

    npm i react-native-custom-theme

    DownloadsWeekly Downloads

    3

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    1.42 MB

    Total Files

    97

    Last publish

    Collaborators

    • estbalveer