Hello everyone, this is a follow up article for our new react native theming library, which now has an official YouTube video about it!
Youtube link: https://youtu.be/wW20AkwmGMk
Github link: https://github.com/KJ-GM/theme-csx
Thank you and enjoy!
Example
// 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 prop 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 prop was added to make it themeable
},
});
Top comments (0)