Skip to main content

Custom Themes

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.

Before starting, be sure to complete the Create Abyss App tutorial.

Step 1: Create a Theme Page​

In Visual Studio Code, open my-new-app project. From here, navigate into products/web/src/routes, and create a new folder, name "ThemePage". Within this new folder, we'll be creating two new files, named "index.ts" and "ThemePage.tsx".

Remember to connect your page to the router in products/web/src/routes/Routes.tsx by including a new Route shown below:

<Router.Route path="/theme-page" element={<ThemePage />} />

You may reference the Page Routing tutorial for more information on creating pages.

Step 2: Choosing A Theme​

Abyss currently has pre-defined themes for Optum, UHC, and UHG brands. In products/web/src/browser.tsx, you will see const theme = createTheme('uhg');. Within this createTheme function, you can choose between these different brands demonstrated below:

Optum Theme

const theme = createTheme('optum');

UHC Theme

const theme = createTheme('uhc');

Step 3: Customizing your Theme​

If you need to customize these default themes to meet your product's branding, you can include a configuration to override variables within the theme that are used to style Abyss components.

There are many ways to customize and style your application. For now, we will be focusing on color and font customization. If you are curious to learn more about other options, check out ThemeProvider.

The code below shows how to customize a theme to your preferences. In browser.tsx, add the following configurations to your theme:

const coreTheme = {
  core: {
    color: {
      brand: {
        80: {
          value: '#ad6589',
          type: 'color',
        },
        100: {
          value: '#993f6c',
          type: 'color',
        },
        120: {
          value: '#7a3256',
          type: 'color',
        },
      },
    },
  },
};


const flattenedTokens = flattenTokens(coreTheme);


const theme = createTheme('uhc', {
  theme: flattenedTokens,
});

Step 4: Viewing Theme​

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

import React from 'react';
import { Heading } from '@uhg-abyss/web/ui/Heading';
import { Button } from '@uhg-abyss/web/ui/Button';


export const ThemePage = () => {
  return (
    <div>
      <Heading>Themed Heading</Heading>
      <Button>Themed Button</Button>
    </div>
  );
};

In your browser, your ThemePage should look like this:


Great job, you have successfully customized a theme!

Table of Contents