Theming

The theming system in our application provides a flexible way to customize the look and feel of the UI components. It includes color schemes for light and dark modes and font configurations. Theming can be customized using the App Branding extension in the dashboard.

Using the Theme

To use the theme in your components:

1. Import the necessary hooks and components:

import { useStyles, createStyleSheet } from "@appmaker-xyz/react-native";

2. Create a stylesheet using createStyleSheet:

const stylesheet = createStyleSheet((theme) => ({
  container: {
    backgroundColor: theme.colors.background,
    padding: theme.spacings.xl,
  },
}));

3. Use the useStyles hook in your component:

const { styles, theme } = useStyles(stylesheet);

4. Apply the styles and theme properties to your components:

<Layout style={styles.container}>
  <ThemeText color={theme.colors.accent} fontFamily="medium">
    Themed Text
  </ThemeText>
</Layout>

Example Component

import React from "react";
import { ThemeText, Layout } from "@appmaker-xyz/ui";
import { createStyleSheet, useStyles } from "@appmaker-xyz/react-native";

const Component = (props) => {
  const { styles, theme } = useStyles(stylesheet);
  return (
    <Layout style={styles.container}>
      <ThemeText fontFamily="medium" color={theme.colors.text}>
        Component!
      </ThemeText>
    </Layout>
  );
};

const stylesheet = createStyleSheet((theme) => ({
  container: {
    backgroundColor: theme.colors.background,
    padding: theme.spacings.md,
  },
}));

export default Component;

Common Theme Properties

Font Family

Font families are configurable and can be customized using app settings:

fontFamily: {
  regular: "SFProDisplay-Regular", // Default, can be customized in App Branding extension
  medium: "SFProDisplay-Medium",   // Default, can be customized in App Branding extension
  bold: "SFProDisplay-Bold",       // Default, can be customized in App Branding extension
}

Spacing and Border Radius

Common sizes are used for both spacing and border radius:

const commonSizes = {
  xs: 2,
  sm: 4,
  md: 6,
  lg: 8,
  xl: 12,
  "2xl": 16,
  "3xl": 24,
};

These sizes are available in the theme as spacings and borderRadii.

Color Schemes

The theme includes separate color schemes for light and dark modes. These are defined in lightColors and darkColors respectively. Can be customized from App Branding extension in the dashboard.

info

To enable dark mode, you need to switch "Enable System Color Scheme Switching" in App Branding extension. If not enabled, the app will use light mode colors.

Light Mode Colors (Default)

• pageBackground: ⬤ '#FAFAFA'
• background: ⬤ '#ffffff'
• text: ⬤ '#000000'
• lightBackground: ⬤ '#E9ECF3'
• lightText: ⬤ '#212121'
• primaryButtonBackground: ⬤ '#000000'
• primaryButtonText: ⬤ '#ffffff'
• secondaryButtonBackground: ⬤ '#475569'
• secondaryButtonText: ⬤ '#ffffff'
• accent: ⬤ '#27ae60'
• icon: ⬤ '#333333'
• separator: ⬤ '#f4f3f3'
• headerBackground: ⬤ '#f2f2f2'
• statusbar: ⬤ '#f2f2f2'
• link: ⬤ '#007BFF'
• error: ⬤ '#DC2626'
• success: ⬤ '#30A479'
• warning: ⬤ '#ffae42'
• placeholder: ⬤ '#999999'
• muted: ⬤ '#C0C0C0'
• loading: ⬤ '#f4f4f4'

Dark Mode Colors (Default)

• pageBackground: ⬤ '#222222'
• background: ⬤ '#333333'
• text: ⬤ '#ffffff'
• lightBackground: ⬤ '#555555'
• lightText: ⬤ '#ffffff'
• primaryButtonBackground: ⬤ '#3730A3'
• secondaryButtonBackground: ⬤ '#0F172A'
• icon: ⬤ '#eeeeee'
• separator: ⬤ '#555555'
• headerBackground: ⬤ '#222222'
• statusbar: ⬤ '#222222'
• link: ⬤ '#4fc3f7'
• error: ⬤ '#ff6b6b'
• success: ⬤ '#68b995'
• warning: ⬤ '#ffc078'
• placeholder: ⬤ '#aaaaaa'
• muted: ⬤ '#555555'
• loading: ⬤ '#333333'

Dark Mode

When enabling dark mode, make sure to test your app thoroughly to ensure that all components are visible and accessible.

tip

To handle dark mode manually in your components, you can use useColorScheme hook from react-native to get the current mode and adjust the component accordingly.

import { useColorScheme } from "react-native";

const isDarkMode = useColorScheme() === "dark";