Theme

🤔 Intro

The application supports multi-theming based on the device theme for both platforms.

🎨 Colors

Use the colors.ts file in order to add colors. It's recommended to keep the app's colors in this file in order not to repeat them. Otherwise, it'll be impossible to implement multi-theming correctly. If you don't know how to choose the name for a color then there is a useful tool for this.

🌓 Theme

The next type is used in order to describe the application theme:

export type Theme = {
  primary: string;
  accent: string;
  background: string;
  surface: string;
  error: string;
  text: string;
  secondaryText: string;
  separator: string;
  disabled: string;
  placeholder: string;
  backdrop: string;
  notification: string;
};

• primary - primary color for your app, usually your brand color;
• accent - secondary color for your app which complements the primary color;
• background - background color for pages, such as lists;
• surface - background color for elements containing content, such as cards;
• error - color for error's text;
• text - primary color for app's text;
• secondaryText - secondary color for app's text;
• separator - color is used for separators;
• disabled - color for disabled elements;
• placeholder - color for placeholder text, such as input placeholder;
• backdrop - color for backdrops of various components such as modals;
• notification - color is used for notification's color.

You could also extend your own theme type.

🖤🤍 useTheme

useTheme is a hook that was developed in order to support dynamic changes for the app's theme. It also makes it possible to use StyleSheet dynamically.

In order to use this hook correctly, follow the steps below:

1. Create styles.ts file in the component's folder;
2. Use styleSheetFactory function from the theme module:

export default styleSheetFactory(theme => ({
  text: {
    color: theme.text,
  },
});

3. import themedStyles from './styles' in the component's file;
4. Use useTheme hook:

const [styles, theme, resolvedName] = useTheme(themedStyles);

• styles - is a style sheet object that is used for styling;
• theme - is an object that contains theme's colors;
• resolvedName - is a name of the current theme;

🖼️ useImages

useImages is a hook that was developed in order to support different images based on the current theme.

If you want to add a new image to the project then add it to light and dark images in images.ts.

In order to use this hook correctly, follow the steps below:

1. Use useImages hook:

const images = useImages();

2. Use the object with the images.

8️⃣ Sizes

A good practice throughout working with sizes is to keep them in a single file. In the future, it'll be possible to make global changes from a single place. It also helps us to standardize the sizes for the whole application. Use sizes.ts in order to keep all the sizes.

📚 Examples

The base project contains a lot of working examples, use this folder as a reference.