🌗 Youtube Tutorial: https://youtu.be/wW20AkwmGMk
IOS | Android |
---|---|
🚀 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 & React Native.
- Supports React Navigation.
🌟 System: changes to the phone appearance
preference while the app is running will be applied dynamically.
-
IOS: changes will be shown
immediately
without the need to reopen the app.
✅ Installation
npm install theme-csx
yarn add theme-csx
📝 Get Started
StyleSheet
- Is similar to the usual styling format, but now you have additional props to make style themeable.
T() - Themed Function
- Apply only your themed styles using the T() function wrapper.
TV() - Themed Value Function
- Is an extra helper function that can be used to theme a specific value. (it becomes useful with react navigation)
appearanceHook
- Use the appearanceHook to switch theme from anywhere in your app.
🌓 Expo: To make the system preference work, make sure "userInterfaceStyle":"automatic"
is added to app.json
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 = () => {
switch (appearanceHook.activeTheme) {
case 'dark':
appearanceHook.switch('light');
break;
case 'light':
appearanceHook.switch('system');
break;
default:
appearanceHook.switch('dark');
break;
}
};
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
},
});
🚦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
Sponsors
License
Apache-2.0 License