Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProScope a set of theme tokens to one element, so many themes can live on the same page, with an optional light, dark or inherited mode.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when more than one theme has to be on a page at the same time: a theme gallery, a before and after comparison, a per-tenant preview, or a card that must keep its own look inside a themed app. The element you spread the props on, and everything inside it, reads its own --background, --primary and the other variables, so Tailwind classes such as bg-background and text-primary follow the scope.
Do not use it to switch the theme of the whole app: put the variables on :root and .dark instead (the theme pages export that CSS). The hook scopes tokens to one element.
import { useThemeScope } from "@/hooks/use-theme-scope"const scope = useThemeScope({
light: {
background: "oklch(0.985 0.01 150)",
foreground: "oklch(0.25 0.04 150)",
},
dark: {
background: "oklch(0.18 0.03 150)",
foreground: "oklch(0.95 0.015 150)",
},
mode: "dark", // "light" | "dark" | "inherit" (default)
})
return (
<div {...scope.props}>
{scope.css ? <style>{scope.css}</style> : null}
<Card>This card wears the scoped theme.</Card>
</div>
)useThemeScope(options): { id, props, css } and buildThemeScope(id, options) (the same without React, for server components).
| Option | Type | Default | Description |
|---|---|---|---|
light | Record<string, string> | - | Light tokens by name without --, for example { background: "oklch(1 0 0)" }. |
dark | Record<string, string> | light tokens | Dark tokens. |
mode | "light" | "dark" | "inherit" | "inherit" | light and dark pin the scope. inherit follows a .dark class on an ancestor. |
radius | string | - | Sets --radius. |
fontFamily | string | - | Sets --font-sans and the scope's font. |
id | string | generated | A stable id for server rendering. |
| Result | Description |
|---|---|
props | Spread on the element: data-theme-scope, data-theme-mode and, for a pinned mode, a style with the variables. |
css | For inherit, a rule for each mode to render once in a <style> element. Empty for a pinned mode. |
Token names must be plain custom-property names and values may not contain ;, braces, angle brackets or comments. Anything else is dropped, so token data from users cannot break out of the rule.
The hook adds no roles or focus behaviour. It sets color-scheme on a pinned scope so form controls and scrollbars match, and the scope paints --background and --foreground so text always sits on the surface it was checked against. Check contrast for every theme you scope; the theme pages report it.
The hook ships with a test (use-theme-scope.test.ts). It covers a pinned light and dark scope, the inherited mode with both rules, the light-only fallback, radius and font, rejection of unsafe token names and values, and a stable result for equal options.