@poncegl/theme

A simple React Native library, to keep your color palette organized.

Demo

Installation

  npm i @poncegl/theme

  yarn add @poncegl/theme

Usage/Examples

Wrap your application with the ThemeProvider component. Enable DarkMode Android and iOS support.

import {ThemeProvider} from '@poncegl/theme';

export default function App(): JSX.Element {
  return (
    <ThemeProvider>
      <Main />
    </ThemeProvider>
  );
}

Hook

Access the color palette from any component with the custom hook useTheme.

import {useTheme} from '@poncegl/theme';

export default function Main(): JSX.Element {
  const {colors} = useTheme();

  return (
    <SafeAreaView
      style={[
        styles.content,
        {
          backgroundColor: colors.background,
        },
      ]}>
      <View style={styles.content}>
        <Text
          style={{
            color: colors.text,
          }}>
          Main
        </Text>
      </View>
    </SafeAreaView>
  );
}

Convert hexadecimal to RGBA colors

The function 'hexToRGBA' receives two parameters, a hexadecimal color and a number representing the opacity you want it to have.

The function returns the same color converted to RGBA with the indicated opacity.

import {hexToRGBA} from '@poncegl/theme';

Custom color palette

The ThemeProvider component receives the options prop is an object of type OptionsTheme.

import {hexToRGBA, OptionsTheme, ThemeProvider} from '@poncegl/theme';

import Main from './src/content/main';

const myCustomTheme: OptionsTheme = {
  colors: {
    primary: hexToRGBA('#1e40af', 1),
    accent: hexToRGBA('#1e3a8a', 1),
    text: hexToRGBA('#ffffff', 1),
    background: hexToRGBA('#9ca3af', 1),
    surface: hexToRGBA('#60a5fa', 1),
    info: hexToRGBA('#1d4ed8', 1),
    error: hexToRGBA('#dc2626', 1),
    success: hexToRGBA('#4ade80', 1),
    onSurface: hexToRGBA('#ffffff', 1),
    white: hexToRGBA('#ffffff', 1),
    black: hexToRGBA('#000000', 1),
    disabled: hexToRGBA('#1e3a8a', 0.5),
    placeholder: hexToRGBA('#ffffff', 0.7),
    backdrop: hexToRGBA('#000000', 0.5),
    notification: hexToRGBA('#000000', 0.5),
    tooltip: hexToRGBA('#f97316', 1),
  },v
};

export default function App(): JSX.Element {
  return (
    <ThemeProvider options={myCustomTheme}>
      <Main />
    </ThemeProvider>
  );
}

ColorsTheme

property: the name inside the object colors initial value: is the initial color of the available colors rgba: is the color created via hexToRGBA type: is the data type, ColorValue comes from React Native

property	initial value	rgba	sample	type
primary	blue[800]	rgba(30, 64, 175, 1)		ColorValue
accent	blue[900]	rgba(30, 58, 138, 1)		ColorValue
text	white	rgba(255, 255, 255, 1)		ColorValue
background	gray[400]	rgba(156, 163, 175, 1)		ColorValue
surface	blue[400]	rgba(96, 165, 250, 1)		ColorValue
info	blue[700]	rgba(29, 78, 216, 1)		ColorValue
error	red[600]	rgba(220, 38, 38, 1)		ColorValue
success	green[400]	rgba(74, 222, 128, 1)		ColorValue
onSurface	white	rgba(255, 255, 255, 1)		ColorValue
white	white	rgba(255, 255, 255, 1)		ColorValue
black	black	rgba(0, 0, 0, 1)		ColorValue
disabled	blue[900]	rgba(30, 58, 138, 0.5)		ColorValue
placeholder	white	rgba(255, 255, 255, 1)		ColorValue
backdrop	black	rgba(0, 0, 0, 1)		ColorValue
notification	black	rgba(0, 0, 0, 1)		ColorValue
tooltip	orange[500]	rgba(249, 115, 22, 1)		ColorValue

Colors

More colors available

import {blue, green, pink} from '@poncegl/theme';

Authors

• PonceGL