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

IOS	Android

🚀 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...
• Auto-completion & Dynamic
• 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)

themeProvider() - New 🌟

• Use this function to set up and maintain a constant global theme around the app.

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 ❓

1. Create a 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);

2. Import app 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
  },
});

🚦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

themeObj:

• Has the following categories: colors, spacing, font, lineHeight, letterSpacing, shadow

Sponsors

License

Apache-2.0 License