Theming
Rebass components are built with themeability in mind. All colors, typographic styles, layout styles, and component variants can be completely customized with theming.
ThemeProvider
To apply themes to Rebass components, add a ThemeProvider component to the root of your application and pass a theme
object as a prop.
If you're using Emotion by itself, install the emotion-theming
package.
If you're using Rebass with Theme UI, use its ThemeProvider
or the gatsby-plugin-theme-ui
package.
import React from 'react'import theme from './theme'import { ThemeProvider } from 'emotion-theming'// or for use with Theme UI:// import { ThemeProvider } from 'theme-ui'export default props =><ThemeProvider theme={theme}>{props.children}</ThemeProvider>
Rebass follows the Theme Specification, which allows you to define thematic values in a more portable format. Themes created for Styled System or Theme UI will work with Rebass with no additional configuration required. This also means that themes created for use with Rebass will work in other applications that follow the same specification.
Example
The following is an example theme, showing some of the design constraints that can be defined as scales, including colors, typography, layouts, and variants.
// example theme.jsexport 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: {body: 'system-ui, sans-serif',heading: 'inherit',monospace: 'Menlo, monospace',},fontWeights: {body: 400,heading: 700,bold: 700,},lineHeights: {body: 1.5,heading: 1.25,},shadows: {small: '0 0 4px rgba(0, 0, 0, .125)',large: '0 0 24px rgba(0, 0, 0, .125)'},variants: {},text: {},buttons: {primary: {color: 'white',bg: 'primary',}}}
Preset
To quickly get started without creating a custom theme, install the Rebass Preset package and use it in place of a custom theme.
npm i @rebass/preset
import React from 'react'import { ThemeProvider } from 'emotion-theming'import preset from '@rebass/preset'export default props =><ThemeProvider theme={preset}>{props.children}</ThemeProvider>
Demo
Edit the theme in the demo below to see how colors, space, and typographic scales affect the Button component.