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

import { UIC } from "@uicapsule/components";
import "@uicapsule/components/theme.css";

const Application = ({ children }) => <UIC theme="uicapsule">{children}</UIC>;

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.

import { UIC, ThemeProvider } from "@uicapsule/components";
import "@uicapsule/components/theme.css";
import "themes/productTheme/theme.css";

const Application = () => (
  <UIC theme="uicapsule">
    UIC theme is used here
    <ThemeProvider theme="productTheme">Product theme is used here</ThemeProvider>
  </UIC>
);

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.

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

    <ThemeProvider theme="twitter">
      <Button color="primary" rounded>
        Share
      </Button>
    </ThemeProvider>
  </View>
</UIC>

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>

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

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

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