Knowledge of themes is required.
To provide the active theme to all React components, we'll need to render a
ThemeProvider at the
root of your application. By default, the active theme will automatically be detected based on a
user's preference, like preferred color scheme, contrast levels, and more!
ThemeProvidermay be rendered in an application.
As mentioned in the primary themes documentation, a theme can be changed with the
method. When called, this method will trigger a re-render on the root
However, there is a secondary approach for changing themes, and that is through the
This approach is a bit cumbersome, as it requires re-rendering the provider near the root of the
application, which requires some form of state at that layer.
ThemeProvider provides design tokens to the entire application by declaring
CSS variables and applying a
<body /> class name. Because of this architectural decision, themes
and styles can be dynamically changed with ease.
Because we utilize CSS variables, we implicitly support nested themes by taking advantage of
element-level CSS variable cascading. To integrate nested themes, use the
with an explicit theme name.
ContextualThemeProviders can be infinitely nested, but not recommended.
To manually access the provided
Theme object, either from the root or contextually, use the
useTheme() hook or