Theming

To apply themes to Rebass components, add a ThemeProvider component to the root of your application and pass a theme object as a prop.

import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>

If you do not apply your own theme, or you don't include all the keys the theme object expects, Rebass will revert to the default values, which are inherited from styled-system.

An example theme could look like the following:

// example theme.js

export default {
  breakpoints: ['40em', '52em', '64em'],
  fontSizes: [
    12, 14, 16, 20, 24, 32, 48, 64
  ],
  colors: {
    blue: '#07c',
    lightgray: '#f6f6ff'
  },
  space: [
    0, 4, 8, 16, 32, 64, 128, 256
  ],
  fonts: {
    sans: 'system-ui, sans-serif',
    mono: 'Menlo, monospace',
  },
  shadows: {
    small: '0 0 4px rgba(0, 0, 0, .125)',
    large: '0 0 24px rgba(0, 0, 0, .125)'
  }
}

Theme Object

Rebass and styled-system allow global font sizes, colors, spacing, button variants, and other values to be set with a theme object.

The following keys will be picked up by styled-system props:

KeyTypeDescription
breakpointsArrayArray of strings representing viewport widths to use for min-width media queries.
fontSizesArrayArray of numbers to use as a typographic scale
colorsObjectColor names that can be used in color, bg, and borderColor props
spaceArrayArray of numbers for use as margin and pixel values
fontsArray or ObjectValues for the fontFamily prop
fontWeightsArray or ObjectValues for fontWeight prop
lineHeightsArray or ObjectValues for lineHeight prop
letterSpacingsArray or ObjectValues for letterSpacing prop
shadowsArray or ObjectValues for boxShadow prop
bordersArray or ObjectValues for border props
radiiArray or ObjectValues for borderRadius props
opacityArray or ObjectValues for opacity props

By default arrays of numbers are interpreted as px, other unit of measurements can be specified by using an array of strings instead, e.x. ['768px', '992px', '1200px'].

Button & Card Variants

The Button and Card components accept a variant prop to pick up predefined styles in the theme.

// example theme.js
const blue = '#07c'

export default {
  buttons: {
    primary: {
      color: '#fff',
      backgroundColor: blue,
    },
    outline: {
      color: blue,
      backgroundColor: 'transparent',
      boxShadow: 'inset 0 0 0 2px'
    }
  }
}

With the above buttons object, the Button component can apply styles based on the variant prop.

<Button variant='primary' />
<Button variant='outline' />