Scoped Theming

Apply a different theme to one part of your page.

Apply a different theme

Use ThemeScope inside your existing VortexProvider. First, generate both themes and import their CSS:

src/main.tsx

import "./themes/sleek/globals.css";
import "./themes/partner/globals.css";

The root uses sleek, while the nested button uses partner:

import { Button, ThemeScope, VortexProvider } from "@vortexlabs/vortex";

export function App() {
return (
  <VortexProvider defaultTheme="sleek">
    <Button>Sleek button</Button>
    <ThemeScope name="partner">
      <Button>Partner button</Button>
    </ThemeScope>
  </VortexProvider>
);
}

Only content inside the scope uses partner. The rest of the page keeps sleek, and both use the parent's color mode.

Create an override

For a small change, create a themeOverride. This example gives buttons round corners while keeping the rest of your theme.

Add it alongside themes in vortex.config.ts:

vortex.config.ts

themeOverride: {
rounded: {
  componentTokens: {
    borderRadius: {
      button: { borderRadius: "full" },
    },
  },
},
},

Run bun run build:theme, then import the override after the base theme:

src/main.tsx

import "./themes/sleek/globals.css";
import "./themes/overrides/rounded/theme.css";

Apply the base and override together inside your provider:

<ThemeScope name={["sleek", "rounded"]}>
<Button>Rounded button</Button>
</ThemeScope>

sleek supplies the base tokens; rounded changes the button radius. To use the variation everywhere, pass defaultTheme={["sleek", "rounded"]} to your provider.

CSS import order determines precedence when matching declarations have equal specificity. The order of theme names in the array doesn't change that order.

Scope the color mode

Set a fixed color mode or invert the parent's mode while keeping its theme:

<ThemeScope colorMode="dark">
<Button>Always dark</Button>
</ThemeScope>

<ThemeScope colorMode="inverted">
<Button>Opposite color mode</Button>
</ThemeScope>

ThemeScope applies tokens without adding a layout box. Put a layout component inside it when you need a background or spacing.

See Create Theme to define the theme tokens used by your scopes.