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>

An example theme could look like the following:

// example theme.js

export default {
  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 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

Additionally, each Rebass component can be themed with CSS objects and added to the theme with a key corresponding to its name.

// example theme
const theme = {
  Heading: {
    fontFamily: '"Roboto Condensed", sans-serif',
    lineHeight: 1.25
  }
}

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' />