---

Note:
We would appreciate any feedback on our tutorial guide. If you are stuck at any time, make sure to contact the Abyss Admiral assigned to your team. If they cannot help, send a help request on our Contact Page.

---

Step 1: Create a Theme screen

In Visual Studio Code, open the my-new-app project. From here, navigate to products/mobile/src/screens and create a new folder named ThemeScreen. Within this new folder, create two new files named index.ts and ThemeScreen.tsx.

products
└── mobile
    └── src
        └── screens
            └── ThemeScreen
                ├── index.ts
                └── ThemeScreen.tsx

Step 2: Choosing A Theme

In ThemeScreen.tsx, we are building our theme using the pre-defined UHC theme. You can choose between the different brands shown below:

Abyss offers pre-defined themes: UHC and Optum. You can find these themes here.

While building ThemeScreen.tsx, you can choose any of the brands demonstrated below.

---

UHC Theme

const theme = createTheme('uhc');

Optum Theme

const theme = createTheme('optum');

Step 3: Customizing your Theme

There are multiple ways to customize and style your application. In this guide, we will focus on color and font customization.

To customize your brand's default themes to align with your product's branding, you can include a configuration object to add or override variables within the theme by adding values inside the createTheme function as shown below.

You can learn more about the createTheme function here.

const theme = createTheme('uhc', {
  // Add custom colors
  theme: {
    colors: {
      customColor: 'purple',
    },
    // Add custom fonts
    fonts: {
      customFont: 'UHCSerif',
    },
  },
});

Step 4: Viewing Theme

To view some of your theme updates, import some Abyss components into your project and see how they look!

() => {
  // Add Custom Theme
  const theme = createTheme('uhc', {
    theme: {
      colors: {
        customColor: '#8943fe',
      },
      fonts: {
        customFont: 'UHCSerif',
      },
    },
  });

  return (
    //Define Custom Theme in theme prop
    <ThemeProvider theme={theme}>
      <Text>Standard Text</Text>
      <Text fontFamily="$customFont" color="$customColor">
        Customized Text
      </Text>
    </ThemeProvider>
  );
};

Great job, you have successfully customized a theme!