react-landing-page/docs/theming.md

[](https://hermanya.github.io/react-landing-page/)

# Theming

React landing page is based on Rebass, which is using `styled-system` for styling. To use Rebass's core theme includes breakpoints, a spacing scale,
a typographic scale, fonts, font weights, border radii, and colors, all of which can be configured with the `<Provider />` component.

To customize the underlying theme, pass a `theme` object to the `<Provider />` component.

```.jsx
<Provider
  theme={{
    fonts: {
      sans: '"Avenir Next", Helvetica, sans-serif',
    },
    fontSizes: [
      12, 16, 24, 36, 48, 72
    ]
  }}>
  <CallToAction fontSize={[ 2, 3, 4, 5 ]}>
    Hello
  </CallToAction>
</Provider>
```

The theme object has the following shape. Any custom values passed to the Provider component will be merged with the defaults.

```js
// Default values
const theme = {
  breakpoints: [
    32,
    48,
    64,
    80
  ],
  space: [
    0,
    4,
    8,
    16,
    32,
    64,
    128,
  ],
  fonts: {
    sans: 'system-ui, sans-serif',
    mono: 'Menlo, monospace',
  },
  fontSizes: [
    12,
    14,
    16,
    20,
    24,
    32,
    48,
    64,
    72,
    96
  ],
  fontWeights: {
    normal: 400,
    bold: 700
  },
  colors: {
    black: '#000',
    white: '#fff',
    ...etc
  },
  radii: [ 0, 2, 4 ]
}
```


See the [styled-system][system] docs for more about how react-landing-page style props integrate with the theme.

[system]: https://github.com/jxnblk/styled-system