Module: theme/theme-provider
Table of contents
Functions
Functions
ThemeProvider
▸ ThemeProvider(props): ReactElement<any, string | JSXElementConstructor<any>>
ThemeProvider is a component that wraps the CssVarsProvider from MUI Joy, configuring it to use a custom theme. It sets up a CSS variable-based theming solution that automatically handles light/dark modes based on system settings, with the ability to override it via user preferences stored in localStorage.
Parameters
| Name | Type | Description |
|---|---|---|
props | Object | The properties passed to the ThemeProvider component. |
props.children | any | The child components that will inherit the theme. This is typically used at the top level of an app to ensure consistent theming across all child components. The ThemeProvider uses the theme object, which should define all the necessary design tokens like colors, typography, etc. It also sets up a localStorage key based on a provided prefix to remember the user's theme preference across sessions. |
Returns
ReactElement<any, string | JSXElementConstructor<any>>
Example
<ThemeProvider>
<App />
</ThemeProvider>Defined in
node_modules/@captn/joy/dist/esm/theme/theme-provider.js:26