Skip to main content
Table of Contents

Theme provider

The Theme provider is a wrapper that provides theming values to all of the components it contains.

Table of Contents
Used for this
  • As the root component of the Garden DOM, where it provides global context for color mode and RTL layout
  • As a nested wrapper for a subset of components that require themed styling

How to use it

Default

The typical usage of a theme provided to styled components. Use the getColor utility with semantic color variables to ensure custom components work well in dark mode.

Branding

You can override the default Theme provider for a branded component experience. In this example, Garden’s primaryHue is replaced and corners are set to square.

Extension

The default theme can be extended with custom values. In this example, the palette adds a new deep orange hue which replaces Garden’s default dangerHue.

Nesting

A nested Theme provider can access and modify parent theming values. In this example, nesting is used to override the size, color, and shape of the default styled component.

Targeting

The theme’s components object can override styling for a targeted component type. In this example, Garden Tabs are restyled to appear below associated panel content.

Configuration

  • Name9.0.0-next.26•View source•View on npm
  • Installnpm install @zendeskgarden/react-theming
  • Depsnpm install react react-dom styled-components
  • Importimport { ThemeProvider } from '@zendeskgarden/react-theming'

API

ThemeProvider

Prop nameTypeDefaultDescription
theme
Provides values for component styling. See styled-components ThemeProvider for details.