theme-provider

React helpers for theming components. Works with inline styles or any css-in-js library.

Demos:

• Basic Example

Installation

npm install --save react react-dom redux react-redux # peer dependencies
npm install --save theme-provider

Usage

// 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)

Check out the basic form example for the entire source.

// MyThemedComponent.js

import { withStyles } from 'theme-provider'

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

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

Usage with Glamor

// 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)

Usage with Aphrodite

// 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)