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

Abyss theming supports changing colors, spacing, box-shadows, font families, font sizes and many other properties. Themes let you apply a consistent tone to your app. It allows you to customize all design aspects of your project in order to meet the specific needs of your business or brand. To configure the theme, wrap your app with a ThemeProvider component.

Theme Provider

While Abyss components come with a default theme, the ThemeProvider is an optional component to change the theme globally.

ThemeProvider relies on the context feature of React to pass the theme down to the components, so you need to make sure that ThemeProvider is a parent of the components you are trying to customize.

This component takes a theme prop and applies it to the entire React tree that it is wrapping around. It should preferably be used at the root of The component tree.

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

import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';


const themeOverride = {
  theme: {
    colors: {
      primary1: '#002677',
      primary2: '#FFFFFF',

      secondary1: '#00BED5',
      secondary2: '#F5B700',
    },
    fonts: {...},
  },
};

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

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

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