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.

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, we can use Theme provider utility and a 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 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.

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

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

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.

<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 Theme utility documentation to see how you create components or page sections using a different color mode.