:last_quarter_moon: Youtube Tutorial: https://youtu.be/wW20AkwmGMk

🚀 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