Theme provider

Applies chosen theme to the target scope
Applies chosen color mode to the target scope
Supports dynamically inverting current color mode


Usage

ThemeProvider is mainly used to create scoped themes. Scoped themes are themes applied only to a specific part of the page. For example, they can be used to create social media share buttons using our Button component.

To achieve this, you can create a custom theme using our Theming CLI and then pass that theme to the ThemeProvider.

You can find more about how to create your custom themes in our Scoped theming documentation:

In Reshaped, we don't treat light and dark modes like two different themes. Instead, we have a separate colorMode definition.

It's applied on the top level of the application for all its themes. However, sometimes components might be using dark backgrounds in light mode and vice versa. To avoid supporting inverted color tokens for every theme and increase the theme CSS size, we allow inverting the current mode in runtime with the ColorMode utility.

Same as inverting the currently used color mode, you can pick dark or light mode to be used all the time.

Properties

Name
Type
children
React.ReactNode
colorMode
dark
light
inverted
theme
string
className
Array<
string
undefined
null
false
>
Previous