ThemeProvider API

The ThemeProvider component must be instantiated as a wrapper around your main application component. It will probably sit next to a Styletron provider component, a Redux provider, and maybe a ReactIntl provider.

Themes can be nested to good effect. See the sample on multiple themes.

ThemeProvider takes two props:

• theme -- This is an object that overrides all of the base styles of your components, as well as the global meta. See theming for details.
• middlewares -- This is an array of middleware functions. See middleware docs for details.

A typical application harness might look like this. (More information and some simplifications are in the samples for library authors and library users.)

import React from 'react';
import {render} from 'react-dom';
import Styletron from 'styletron-client';
import {StyletronProvider} from 'styletron-react';
import {ThemeProvider} from 'styletron-themer';

const ourAppTheme = {
  // override default component styles
  Button: {
    background: 'red',
    color: 'green'
  },
  Dropdown: {/* ... */},

  // override anything in the global meta
  meta: {
    colors: {
      primary: 'lime',
      brandRed: '#ff0022',
      brandGold: '#e90'
    },
    constants: {
      transitionTime: '250ms'
    }
  }
};

render(
  <StyletronProvider styletron={new Styletron()}>
    <ThemeProvider theme={ourAppTheme}>
      {/* your app code here */}
    </ThemeProvider>
  </StyletronProvider>
, document.getElementById('app'));