You know that moment when you needed a color to be a little bit lighter or darker?
But you don't want to manually make it lighter or darker?
Well... me too.
So that's why a created react-native-color-toolkit
With this library you can have access to a lot of color modification functions like:
- brighten
- darken
- desaturate
- greyscale
- lighten
- saturate
Let's imagine an example where you have a color, but you want that color to be 50% darker, with react-native-color-toolkit you just need to call a function like this:
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View style={[styles.box, {backgroundColor: '#2196F3'}]} />
<Text style={styles.subtitle}>Original color</Text>
</View>
<View style={{justifyContent: 'center', alignItems: 'center'}}>
<View style={[styles.box, {backgroundColor: darken('#2196F3', 0.5)}]} />
<Text style={styles.subtitle}>Modified color</Text>
</View>
Will give you this result:
react-native-color-toolkit also have also have
- Conversion functions (like rgb to Hsl)
- Utility functions (like get the alpha value of a color)
- Material Colors Palette (like Colors.red[700])
I hope it can make your mobile developer life easier.
Feel free to open pull requests and make contributions.
Link to the repo and documentation.
Top comments (0)