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.

const newTheme = {
  ...defaultTheme,
  spinnerColor: 'hotpink'
}

const ThemedApp = () => (
  <ThemeProvider
    value={newTheme}
  >
    <Spinner />
  </ThemeProvider>
)

render(
  <ThemedApp />
)
 Hide code

Nested theming

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

const parentTheme = {
  ...defaultTheme,
  spinnerColor: 'hotpink'
}

const childTheme = {
  ...defaultTheme,
  spinnerColor: 'blue'
}

const ThemedParent = ({ children }) => (
  <ThemeProvider value={parentTheme}>
    <Spinner />
    { children }
  </ThemeProvider>
)

const ThemedChild = () => (
  <ThemeProvider value={childTheme}>
    <Spinner />
  </ThemeProvider>
)

render(
  <ThemedParent>
    <ThemedChild />
  </ThemedParent>
)
 Hide code

Using withTheme

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

Custom styled button
const theme = {
  ...defaultTheme,
  myNewButtonStyles: {
    color: 'white',
    backgroundColor: 'hotpink',
    height: 30,
    borderRadius: '5px',
  }
}

const ThemedApp = ({ children }) => (
  <ThemeProvider value={theme}>
    { children }
  </ThemeProvider>
)

const MyNewButton = ({ theme }) => (
  <button style={theme.myNewButtonStyles}>
    Custom styled button
  </button>
)

const MyNewThemedButton = withTheme(MyNewButton)

render(
  <ThemedApp>
    <MyNewThemedButton />
  </ThemedApp>
)
 Hide code

Using useTheme

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

Custom styled button
const theme = {
  ...defaultTheme,
  myNewButtonStyles: {
    color: 'white',
    backgroundColor: 'hotpink',
    height: 30,
    borderRadius: '5px',
  }
}

const ThemedApp = ({ children }) => (
  <ThemeProvider value={theme}>
    { children }
  </ThemeProvider>
)

const MyNewThemedButton = () => {
  const theme = useTheme()

  return (
    <button style={theme.myNewButtonStyles}>
      Custom styled button
    </button>
  )
}

render(
  <ThemedApp>
    <MyNewThemedButton />
  </ThemedApp>
)
 Hide code