Using themes
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!
Only 1
ThemeProvider
may be rendered in an application.
#
Changing themesAs mentioned in the primary themes documentation, a theme can be changed with the changeTheme()
method. When called, this method will trigger a re-render on the root ThemeProvider
.
However, there is a secondary approach for changing themes, and that is through the name
prop.
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.
#
Contextual themeingA root ThemeProvider
provides design tokens to the entire application by declaring :root
level
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 ContextualThemeProvider
with an explicit theme name.
ContextualThemeProvider
s can be infinitely nested, but not recommended.
#
Accessing the themeTo manually access the provided Theme
object, either from the root or contextually, use the
useTheme()
hook or withTheme()
HOC.
- Hook
- HOC