DEV Community

Cover image for React Native- Theming made easy(2022)
Karam Jammal
Karam Jammal

Posted on • Updated on

React Native- Theming made easy(2022)

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
Enter fullscreen mode Exit fullscreen mode
yarn add theme-csx
Enter fullscreen mode Exit fullscreen mode

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
   },
})

Enter fullscreen mode Exit fullscreen mode

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

Discussion (8)

Collapse
ginisamoha profile image
giniSamoha

Thank you, very useful library!

Collapse
kjgm profile image
Karam Jammal Author

I am glad to hear.

Collapse
argam234 profile image
argam234

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.

Collapse
kjgm profile image
Karam Jammal Author

Sure, A demo will be made soon!

Collapse
mashivili profile image
Misha Ashivili

awesome project!

Collapse
kjgm profile image
Karam Jammal Author

Thank you 🙏

Collapse
samwinberg1999 profile image
Sam Winberg

Very cool man thanks for sharing!

Collapse
kjgm profile image
Karam Jammal Author

You're welcome body.