Theme provider

Use theme provider to share global theme settings throughout the hierarchy of your application. Theme provider is included by default as a child of the app provider component but can be used independently to apply a base theme or to override a parent theme in its children.

Examples

The app provider component renders a ThemeProvider component and a theme.

Drag to resize example

Props

alwaysRenderCustomProperties
boolean
By default, Polaris avoids re-declaring custom properties within the same React tree This prop ensures that the CSS custom properties are always rendered. This is useful for components such as portals that render outside of the root DOM node
children
React.ReactNode
The content to display
theme
ThemeConfig
Custom logos and colors provided to select components

Consuming theme colors in a component

The theme provider component uses CSS custom properties to share color values with components. For a full list of available CSS custom properties, see the Polaris tokens docs.

.Card {
  background-color: var(--p-surface);
  box-shadow: var(--p-card-shadow);
  border-radius: var(--p-border-radius-wide);
}

Creating a component with an inverse color scheme

To create contrast with surrounding elements, some components render themselves with a dark color scheme in a light context or a light color scheme in a dark context. The theme provider component enables this behavior when 'inverse' is passed as a color scheme to a nested theme provider wrapping a component.

return (
  <ThemeProvider theme={{colorScheme: 'inverse'}}>
    <div className="InverseComponent">Component content</div>
  </ThemeProvider>
);