Theme Provider

In order to style your app, you must wrap it in the ThemeProvider component. This component uses the React.Context API under the hood.

In order to use the ThemeProvider component, you must pass it a value prop that is a Theme object.

Please note: at this moment in time, theming isn't fully supported yet! There are certain attributes of the Theme object that are required so please be sure you have them when providing a custom theme.

Simple theming

The ThemeProvider Component, you can either override the default styles(shown below) or use your own theme completely. You can add anything you want to the theme object, as long as you have required properties.

SyntaxError: Unexpected token (1:8)
1 : return (const newTheme = {
            ^
Hide code

Nested theming

You can theme certain parts of your app differently by nesting the ThemeProvider components.

SyntaxError: Unexpected token (1:8)
1 : return (const parentTheme = {
            ^
Hide code

Using withTheme

The withTheme HOC allows you to easily pass the theme object down to your components.

SyntaxError: Unexpected token (1:8)
1 : return (const theme = {
            ^
Hide code

Using useTheme

The useTheme hook provides the same functionalities as the withTheme HOC.

SyntaxError: Unexpected token (1:8)
1 : return (const theme = {
            ^
Hide code