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

npminstalltheme-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

• Applyonly your themed styles using the T() function wrapper.

appearanceHook

• Use the appearanceHook to switch theme from anywhere in your app.

Usage

// Stylesimport{StyleSheet,T,appearanceHook}from"theme-csx";// Componentsimport{Text,View}from'react-native';import{Button}from'@components/atoms';constDemoComponent=()=>{// Theme switchconstswitchTheme=()=>{appearanceHook.switch(appearanceHook.activeTheme==='dark'?'light':'dark')}return(<Viewstyle={T(styles.THEMED_CONTAINER)}><Textstyle={styles.NORMAL_TEXT}>Hey,Iamnormaltext</Text><Textstyle={T(styles.THEMED_TEXT)}>Hey,Iamthemedtext</Text><Buttontext={'Switch theme'}onPress={switchTheme}/></View>)}conststyles=StyleSheet.create({THEMED_CONTAINER:{flex:1,backgroundColor:'white',backgroundDark:'gray',// backgroundDark porp was added to make it themeablealignItems:'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 thecontributing guide to learn how to contribute to the repository and the development workflow.

License

Apache-2.0 License