ThemeScope
Forces one colour scheme for a subtree. Overlays opened from inside it follow the lock, not the page.
Everything in this subtree uses its own scheme.
Everything in this subtree uses its own scheme.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
scheme | RebarScheme | "system" | Yes | — |
Accessibility
A plain <div>: no role and no focus behaviour of its own. It only changes colours, so contrast is that of the locked scheme, which the theme keeps at AA in both light and dark.
data-rebar-* attributes
data-rebar-component="theme-scope" and data-rebar-scheme="light" | "dark". The attribute works on any element: the theme re-declares every token under it. Overlays (Dialog, Drawer, BottomSheet, Popover, Select, Dropdown, Tooltip, HoverCard, Menubar, MultiSelect, CommandPalette) opened from inside a ThemeScope re-apply it on their portaled content through useSchemeAttr(). If you set the attribute by hand instead of using ThemeScope, call useSchemeAttr yourself or portal into the wrapper with the container prop.
Migrating to Ant Design
Map to a nested ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}; AntD also needs getPopupContainer for popups to follow it.