Box can act as a local styling island
When theme or brand is set, the Box creates a scoped styling context for all its descendants without affecting the rest of the app. Under the hood, a styling island provides both Theme and Brand context. All drawable descendants resolve their colors using the nearest styling island.
Theme and brand follow the same rules:
they are scoped to a subtree
they are inherited by descendants
the nearest boundary always wins
they do not affect anything outside the island
Theme defines the rules, surface makes them visible
A styling island is complete only when both context and surface are defined. Setting theme alone changes how colors are interpreted, but does not create a visible surface.
How to do it properly ?
Recommended pattern
<Box theme="dark" drawable variant="solid" intent="neutral"> ...</Box>Components inside the island rely on the active theme to resolve contrast, states and colors. Without a surface, they may still render on the parent background, which can lead to:
incorrect contrast
washed-out or overly strong states
inconsistent appearance (especially disabled state)
Styling islands should typically use neutral surfaces (light or dark). Strong colored backgrounds are not recommended, as they can interfere with contrast and distort component states. If a colored surface is needed, prefer subtle tones.