Theme and media queries

The theme is an object where you can store anything you want readily available, such as colors, fonts and more. Likewise the media object is a place to store media queries you want to re-use throughout your code.

Add the Panache Provider at the top of your component tree. Pass theme and media objects as props to the provider.

import { PanacheProvider } from 'panache'

const theme = {
  colors: {
    primary: '#333',
    accent: 'blue',
  },
  fonts: {
    regular: 'Akzidenz-Grotesk, sans-serif'
  }
}

const media = {
  small: '@media(max-width: 768px)'
}

<PanacheProvider media={media} theme={theme}>
  <App />
</PanacheProvider>

You can then access the theme and media objects as props further down the component tree.

const MyComponent = panache.div(({ theme, media }) => ({
  color: theme.colors.primary,
  fontSize: '18px',
  [media.small]: {
    fontSize: '16px'
  }
}))