RecipesRecipe
Scoped Dashboard Theme
Apply a different theme to a specific subtree (like a dashboard panel) while keeping the rest of the app in its default theme.
- Goal
- Apply a different theme to a specific subtree (like a dashboard panel) while keeping the rest of the app in its default theme.
- Prerequisites
- @themvora/core installed
- A custom theme defined
- Stack
- React
- Result
- Scoped themes for dashboard sections
1Install
Pick your package manager — the command updates to match.
Install command
Needs
@themvora/core@themvora/reactpnpm add @themvora/core @themvora/reactUsing a framework? Its adapter is a separate package — see the framework guides for the provider setup, then come back for the pattern.
2Implement
Drop this into your project. It is the whole pattern — no other setup is required.
import { ThemeScope } from "@themvora/react";
export default function DashboardPage() {
return (
<div>
<h1>Dashboard</h1>
<ThemeScope theme="corporate-light">
<WidgetPanel />
<AnalyticsCard />
</ThemeScope>
</div>
);
}3Why this works
ThemeScope wraps a subtree with an alternate theme. It accepts: - A theme name (string) - A theme family (string) - An object { family, mode } Note: In Svelte, ThemeScope reads props only at mount time. Other frameworks react to prop changes.
4Verify
- The page loads with no console errors after the change.
- The outcome holds: scoped themes for dashboard sections
- Toggling the theme in your app still works, and the state survives a reload if persistence is configured.
- Reduced-motion users see no animation if you enabled transitions.
Common failure
The most frequent cause is a prerequisite that is only half met — an adapter installed without the framework it wraps, or a provider mounted above the component that reads the theme. Re-read the prerequisites above, then confirm the provider wraps the tree that uses the value.