Atoms

Molecules

Components

Theme provider

ThemeProvider

Add `ThemeProvider` in your application. The below code takes the default theme defined in the design-system.

import { ThemeProvider } from 'serverless-design-system'
export default () => (
  <ThemeProvider>
  { /*  Render the root component */ }
  </ThemeProvider>
)

ThemeProvider with a custom theme

To set a custom theme for the design system components, we must pass the custom theme to the ThemeProvider.

import { ThemeProvider } from 'serverless-design-system'
export default () => {
  const customTheme = { fontSizes: [ '1rem', '2rem', '4rem', '8rem' ] }
  return (
    <ThemeProvider theme={customTheme}>
    { /*  Render the root component */ }
    </ThemeProvider>
  )
}