---
name: Theme
---

import {Playground, PropsTable} from 'docz'
import {css} from '@emotion/core'

import Theme from '.'
import Button from '../Button'

# Theme

Uses Emotion to provide theming

<Playground>
  <Theme theme={{
    palette: {
      primary: 'red',
      secondary: 'orange'
    },
    Button: ({theme}) => `
      border: 2px solid black !important;
    `
  }}>
    <Button css={theme => ({backgroundColor: theme.palette.primary})}>Red Button</Button>
  </Theme>
</Playground>

<PropsTable of={Theme}/>
