0.0.3 • Published 8 months ago
@poncegl/theme v0.0.3
@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
import {blue, green, pink} from '@poncegl/theme';