// MyApp.js

import { withTheme, ThemeProvider } from 'theme-provider'

function MyApp({ theme }) {
  return (
    <ThemeProvider theme={theme}>
      <MyThemedComponent />
    </ThemeProvider>
  )
}

// theme variables
export default withTheme({
  primaryColor: 'blue'
})(MyApp)

// or theme variables as a function of props
export default withTheme(props => ({
  primaryColor: props.primaryColor
}))(MyApp)

// MyThemedComponent.js

import { withStyles } from 'theme-provider'

function MyThemedComponent({ styles }) {
  return (
    <div style={styles.base} />
  )
}

export default withStyles(theme => ({
  base: {
    background: theme.primaryColor
  }
}))(MyThemedComponent)

// MyThemedComponent.js

import { style } from 'glamor'
import { withStyles } from 'theme-provider'

function MyThemedComponent({ styles }) {
  return (
    <div {...styles.base} />
  )
}

export default withStyles(theme => ({
  base: style({
    background: theme.primaryColor
  })
}))(MyThemedComponent)

// MyThemedComponent.js

import { StyleSheet, css } from 'aphrodite'
import { withStyles } from 'theme-provider'

function MyThemedComponent({ styles }) {
  return (
    <div className={css(styles.base)} />
  )
}

export default withStyles(theme => StyleSheet.create({
  base: {
    background: theme.primaryColor
  }
}))(MyThemedComponent)