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 pick the main application theme by passing it to the Reshaped provider.

import { Reshaped } from "reshaped";
import "reshaped/themes/reshaped/theme.css";

const Application = ({ children }) => (
  <Reshaped theme="reshaped">{children}</Reshaped>
);

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

import { Reshaped, Theme } from "reshaped";
import "reshaped/themes/reshaped/theme.css";
import "themes/productTheme/theme.css";

const Application = () => (
  <Reshaped theme="reshaped">
    Reshaped theme is used here
    <Theme name="productTheme">Product theme is used here</Theme>
  </Reshaped>
);

Scoped theming is a perfect way to customize component styles. One popular example is implementing social media buttons with different brand colors that are not 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.

<View gap={3} direction="row">
  <Button color="primary">Share</Button>

  <Theme name="twitter">
    <Button color="primary" rounded>
      Share
    </Button>
  </Theme>
</View>

In addition to scoped theming, we also support scoped dark/light mode. This means you don't need inverted color tokens in every theme, reducing the number 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.

<View gap={3} direction="row">
  <Card>Current mode</Card>

  <Theme colorMode="dark">
    <Card>Always dark mode</Card>
  </Theme>

  <Theme colorMode="inverted">
    <Card>Inverted mode</Card>
  </Theme>
</View>

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