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 through React context, with
the active theme being automatically detected based on the device and environment (unless
To theme a specific section of the React tree, a
ContextualThemeProvider can be rendered 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