Figure out what the best props API is for customization

We can expose a props API at the component level. For more global changes that theme authors can expose as options we can implement something like:

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import { Provider } from 'some-ui-library'

export default ({ children, ...props }) => (
   <StaticQuery
    query={graphql`
      query {
        site {
          siteMetadata {
            theme {
              color
              accentColor
              backgroundColor
              layout
            }
          }
        }
      }
    `}
    render={data => (
      <Provider {...props} {...data.site.siteMetadata}>
        <>{children}</>
      </Provider>
    )}
  />
)

It might make more sense to possibly create a new node type in the schema specific to the theme, but the idea is that we use StaticQuery to pull it into React-land and pass it along to the provider. This allows theme authors to be as constrained or flexible as they like, though I think it'd be wise to establish some type of convention so themes are relatively consistent across the board.

johno / gatsby-themes

Figure out what the best props API is for customization #4