CustomProperties

    Use the custom properties component to share global theme settings throughout the hierarchy of your application. Custom properties is included by default as a child of the app provider component but can be used independently to apply a base color scheme to its children.

    Examples

    Down Arrow

    The app provider component renders a CustomProperties component with the default color scheme.


    Consuming custom properties colors in a component

    The CustomProperties 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-shadow-card);
      border-radius: var(--p-border-radius-2);
    }