A React Native theming framework that makes it easy to create themeable components.
APACHE-2.0 License
🌗 Youtube Tutorial: https://youtu.be/wW20AkwmGMk
System: changes to the phone appearance
preference while the app is running will be applied dynamically.
immediately
without the need to reopen the app.npm install theme-csx
yarn add theme-csx
StyleSheet
T() - Themed Function
TV() - Themed Value Function
**themeProvider() - New **
appearanceHook
** Expo**: To make the system preference work, make sure "userInterfaceStyle":"automatic"
is added to app.json
theme.config.ts
file anywhere in the app project, then add your custom theme accordingly, finally use the themeProvider
function to export app theme
.import {themeProvider} from 'theme-csx';
// Note(1): The object must include: colors, spacing, font, lineHeight, letterSpacing, shadow.
// Note(2): If you do NOT want to use any of the above-mentioned categories, leave it empty.
// Note(3): You have the option of adding a new category that is not listed above.
// Note(4): You can update and add inside each category as you see suitable.
// App theme object
const Theme = {
colors: {
primary: '{App primary color}',
secondary: '{App secondary color}',
green: 'green',
light: {
background: '#fff',
text: '#000000',
},
dark: {
background: '#121212',
text: '#FFFFFF',
},
},
spacing: {},
font: {
family: {
muktaBold: 'Mukta-Bold',
muktaRegular: 'Mukta-Regular',
NunitoBold: 'Nunito-Bold',
NunitoRegular: 'Nunito-Regular',
},
size: {
xxs: 9,
xs: 10,
s: 13,
m: 16,
l: 18,
},
},
lineHeight: {},
letterSpacing: {},
shadow: {},
};
// Pass the {Theme} object to the themeProvider function and then export theme to app
export const theme = themeProvider(Theme);
theme
from the theme.config.ts
file and enjoy Dynamic & Auto-completion
features for all theme values// Styles
import { StyleSheet, T, appearanceHook } from 'theme-csx';
import {theme} from './theme.config';
// 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: theme.colors.light.background,
backgroundDark: theme.colors.dark.background, // backgroundDark prop was added to make it themeable
alignItems: 'center',
justifyContent: 'center',
},
NORMAL_TEXT: {
fontWeight: 'bold',
fontSize: theme.font.size.s,
color: theme.colors.green,
},
THEMED_TEXT: {
fontWeight: 'bold',
fontSize: theme.font.size.s,
color: theme.colors.light.text,
colorDark: theme.colors.dark.text, // colorDark prop was added to make it themeable
},
});
TViewStyle:
backgroundDark
, borderDark
TTextStyle:
colorDark
, backgroundDark
, borderDark
TImageStyle:
tintColorDark
, backgroundDark
, borderDark
appearanceHook.switch():
system
, light
, dark
themeObj:
colors
, spacing
, font
, lineHeight
, letterSpacing
, shadow
Apache-2.0 License