Theme provider
The Theme provider is a wrapper that provides theming values to all of the components it contains.
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.2.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 |