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 Arcade provider.

You might have notices that we use PascalCase for the theme variable name here. That's because it's not just an object with values but a React component you can use separately to achieve scoped theming.

Customising components

Scoped theming is a perfect way to make customisations of the component styles as well. One of the popular examples is when you need to implement social sharing 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. This helps us avoid supporting inverted color tokens in every theme and reduced the theme css size by two times.

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