Add a defaultValue fallback for theme

[mergebandit]

There are cases where I want to have a default value applied. I understand that I could do this like so:

const getFooterOverrides = theme('mode', {
  foo: p => p.theme.colors.red
})

const Footer = styled.footer`
  color: blue;
  color: ${getFooterOverrides}
`

I run into problems with this approach when I'm using attrs, and have to do things like:

const StyledPopUp = styled(PopUpIcon).attrs({
  color: p => getFooterOverrides(p) || 'blue'
})`
  margin-left: 4px;
`

It'd be really nice to just have:

const getFooterOverrides = theme('mode', {
  defaultValue: 'blue'
  foo: p => p.theme.colors.red
})

And then simply say ...

const StyledPopUp = styled(PopUpIcon).attrs({
  color: getFooterOverrides
})`
  margin-left: 4px;
`

[sturmenta]

You can also do

export const Container = styled(View)(
  props => ({
    backgroundColor: colors.principal(props),
    textColor: colors.principalText(props),
  }),
);

and in colors file

export default {
  principal:          props => theme('mode', { 'light': '#039BE5', 'dark: '#000420'})(props),
  principalText:      props => theme('mode', { 'light': '#000000', 'dark: '#000000'})(props),
};