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 theme provider component and a theme. By default, theme falls back to the current design language. The new design language is enabled by passing {newDesignLanguage: true} to the features prop on the app provider component. This feature is currently meant for development and quality assurance use only. The new design language is not yet meant for production experiences.

Drag to resize example

Props

children
React.ReactNode
The content to display
themeRequired
ThemeProviderThemeConfig
Custom logos and colors provided to select components

For development purposes only

Theme provider is currently meant for development and quality assurance usage only. The new design language is not yet meant for production experiences.


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.

We apply the current design language value to the fallback value of the var() function in order to gracefully fall back when {newDesignLanguage: false}, as the theme CSS custom properties will not be defined.

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

Avoid using linear-gradient() as a var() fallback

Using the linear-gradient() function as a fallback to the var() function causes infinite re-paints in Safari, and should be avoided. As an alternative, use the value provided to newDesignLanguage to create a class name for your component that's only present when that value is true.

.Button {
  background-image: linear-gradient(
    to bottom,
    color('indigo'),
    color('indigo', 'dark')
  );
}

.Button.newDesignLanguage {
  background-image: var(--p-override-none);
  background-color: var(--p-action-primary);
}

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>
);