@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