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.

ThemeProvider Props

Prop Name	Type	Default	Description
brandAssetsCdn	string	-	A URL to provide a custom CDN for hosting brand assets handled by the Brandmark and IconBrand components
children	node	-	The component tree
colorScheme	'light' | 'dark'	-	The color scheme of the theme
system	'ios' | 'android'	-	The system the theme should support
theme	object | (prevTheme: object) => object	-	A theme object, usually the result of createTheme(). Can also be a function that receives the previous theme and returns an updated theme.

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);