Scoped Theming

Scoped theming is a concept to apply theme values to a specific part of the page instead of the whole application. We've already learned that you're picking the main application theme by passing it to Reshaped provider.

To apply a different theme to a part of the application, we can use ThemeProvider provider utility and a pass a custom theme to it.

Customising components

Scoped theming is a perfect way to make customisations of the component styles. One of the popular examples is implementing social media buttons with different brand colors that are not a part of your product theme. Instead of introducing custom css overrides, you can create a lightweight theme fragment with our CLI and use scoped theming for the Button component.

Scoped color mode

In addition to scoped theming, we also support scoped dark/light mode. It means you don't need inverted color tokens in every theme, reducing the amount of color tokens you have to work with. This is helpful for inverted components like tooltips or toasts but can also be applied to sections of the page if you want them to always stay dark or light.

You can check ThemeProvider utility documentation to see how you create components or page sections using a different color mode.