React Native- Theming made easy(2022)

#reactnative #theming #react #darkmode

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

Oldest comments (8)

giniSamoha • Jan 10 '22

Thank you, very useful library!

Karam Jammal • Jan 15 '22

I am glad to hear.

argam234 • Jan 10 '22

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.