Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@rebass/preset

4.0.5 • Public • Published

@rebass/preset

Base theme preset for use with Rebass

npm i @rebass/preset

Usage

For general usage with Emotion, pass the theme preset to Emotion's ThemeProvider component at the root of your application.

import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import theme from '@rebass/preset'
 
export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>

For use with Theme UI, import the ThemeProvider from theme-ui.

import { ThemeProvider } from 'theme-ui'

Or, if you're using gatsby-plugin-theme-ui, export the theme from src/gatsby-plugin-theme-ui/index.js.

// src/gatsby-plugin-theme-ui/index.js
import preset from '@rebass/preset'
 
export default {
  ...preset
}

Customizing

The base theme object can be customized by using either deepmerge or lodash.merge to deeply merge objects.

import merge from 'lodash.merge'
import preset from '@rebass/preset'
 
export default merge(preset, {
  colors: {
    // custom primary color
    primary: 'tomato',
  }
})

MIT License

Install

npm i @rebass/preset

DownloadsWeekly Downloads

3,074

Version

4.0.5

License

MIT

Unpacked Size

9.96 kB

Total Files

7

Last publish

Collaborators

  • avatar