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 = {
            ^
const newTheme = {
  ...defaultTheme,
  spinnerColor: 'hotpink'
}

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

render(<ThemedApp />)
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.

SyntaxError: Unexpected token (1:8)
1 : return (const parentTheme = {
            ^
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>
)
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.

SyntaxError: Unexpected token (1:8)
1 : return (const theme = {
            ^
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>
)
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.

SyntaxError: Unexpected token (1:8)
1 : return (const theme = {
            ^
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>
)
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