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

How to use it
Configuration
API
- ThemeProvider

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.4.0•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 name	Type	Default	Description
theme			Provides values for component styling. See styled-components `ThemeProvider` for details.