GitHub Link:
https://github.com/KJ-GM/theme-csx
A React Native theming framework that makes it easy to create themeable components.
Features
- Similar to standard react native styling, but with additional props that can be added to make it themeable.
- Can be implemented for Views + Texts + Images + Icons...
- Light & Fast
- Expo & ReactNative
- Typescript & JavaScript
Installation
npm install theme-csx
yarn add theme-csx
Get Started - Three Steps:
StyleSheet
- Is used in the usual styling format, but now you have additional props to make style themeable.
T() Function
- Apply only your themed styles using the T() function wrapper.
appearanceHook
- Use the appearanceHook to switch theme from anywhere in your app.
Usage
// Styles
import { StyleSheet, T, appearanceHook} from "theme-csx";
// Components
import { Text, View } from 'react-native';
import { Button } from '@components/atoms';
const DemoComponent = () => {
// Theme switch
const switchTheme = () => {
appearanceHook.switch(appearanceHook.activeTheme === 'dark' ? 'light' : 'dark')
}
return (
<View style={T(styles.THEMED_CONTAINER)}>
<Text style={styles.NORMAL_TEXT}>Hey, I am normal text</Text>
<Text style={T(styles.THEMED_TEXT)}>Hey, I am themed text</Text>
<Button text={'Switch theme'} onPress={switchTheme} />
</View>
)}
const styles = StyleSheet.create({
THEMED_CONTAINER: {
flex: 1,
backgroundColor: 'white',
backgroundDark: 'gray', // backgroundDark porp was added to make it themeable
alignItems: 'center',
justifyContent: 'center',
},
NORMAL_TEXT: {
fontWeight: 'bold',
fontSize: 14,
color: 'green',
},
THEMED_TEXT: {
fontWeight: 'bold',
fontSize: 14,
color: 'black',
colorDark: 'white' // colorDark porp was added to make it themeable
},
})
Theme Types:
TViewStyle:
- Has the following extra props: backgroundDark, borderDark
TTextStyle:
- Has the following extra props: colorDark, backgroundDark, borderDark
TImageStyle:
- Has the following extra props: tintColorDark, backgroundDark, borderDark
appearanceHook.switch():
- Has the following options: system, light, dark
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
Apache-2.0 License
Top comments (8)
Thank you, very useful library!
I am glad to hear.
Hello, I believe this library should have been created a long time ago, thank you! Also, if you can make a YouTube video about the library, that would be fantastic.
Sure, A demo will be made soon!
awesome project!
Thank you 🙏
Very cool man thanks for sharing!
You're welcome body.