import { createTheme } from '@uhg-abyss/mobile';

The tool createTheme allows for the creation of preset themes and allows you to override those themes to fit your design needs. createTheme is used in conjunction with ThemeProvider.

Properties

createTheme(
  theme: string,
  override?: object,
): object;

Usage

createTheme takes two arguments. The first argument is the choice of a default theme. There are currently 4 themes available: "uhc", "uhg", "optum", and "abyss". If no theme is chosen, it will fall back to the default "abyss" theme. The second argument is any overrides you wish to apply to the chosen base theme.

import { ThemeProvider, createTheme } from '@uhg-abyss/mobile';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';

const themeOverride = {
  theme: {
    colors: {...},
    space: {...},
    fontSizes: {...},
    fonts: {...},
    fontWeights: {...},
    lineHeights: {...},
    letterSpacings: {...},
    sizes: {...},
    borderWidths: {...},
    borderStyles: {...},
    radii: {...},
    shadows: {...},
    zIndices: {...},
    transitions: {...},
  },

};

const theme = createTheme('uhc', themeOverride);

const App = () => {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
};

AppRegistry.registerComponent(appName, () => App);

Example

Here is an example of a theme created with a custom override. A token named customColor will be added to the color tokens.

const theme = createTheme('uhc', {
  theme: {
    colors: {
      customColor: '#ff612b', // orange
    },
  },
});