Recolour a section with a nested data-brand, data-accent or data-neutral, or wrap it in StyleScope to give it its own seed colour, theme, border and fonts.
Since 2.6, a section can carry its own brand, neutral, theme and fonts, so a client's page or a site preview can sit inside your app without touching the rest of it.
When one page needs two looks
Once UI's style lives in data-* attributes on <html>. That's fine until part of a page needs a different look: a site builder previewing a customer's site, a tenant's page inside a shared app, or a testimonial slide in a client's colours.@once-ui-system/core 2.6 handles this in two ways. For a named scheme, put the attribute on the section. For anything more, wrap the section in StyleScope.
A named colour: set the attribute
A nested data-brand, data-accent or data-neutral now recolours its subtree by itself. Before 2.6 the tokens were resolved on <html>, so a section with only data-brand="red" kept the page's brand unless you also set data-theme on it. That extra attribute isn't needed anymore.Brand and accent solids, backgrounds, alpha steps, borders and --page-background all follow the section.
Anything more: StyleScope
When the look comes from a stored config, such as a seed colour, a pinned theme, a border style or different fonts, use StyleScope. It's a Column that takes the same keys as the style part of once-ui.config, so you can pass a saved site style straight in.
config takes brand, accent, neutral, solid, solidStyle, border and surface, the *Seed and *Scale keys, pageBackground and surfaceBackground, plus theme. A light or dark theme pins the subtree, and leaving it unset follows the page.
fonts sets a font-family per role: heading, body, label and code. Roles you leave out keep the page's fonts.
A seed or scale becomes a custom scheme for that element only. Two scopes with different brands can sit side by side on one page.
Settings that only make sense for the whole page, like scaling, device font sizes and transitions, stay on the root config.
StyleScope is a server component. It writes its scheme into a small <style> rule keyed to that element, not an inline style, so the HTML already carries the right colours and the first paint is correct. Config values go through the same check the theme uses, so a stored config can't inject CSS of its own.
Write this / not this
Do
Avoid
`data-brand` on the section
Adding `data-theme` just to make it recolour
`StyleScope` with a saved style config
Hand-copying CSS variables onto a wrapper
`fonts` on the scope
Overriding `font-family` in a stylesheet
One thing to watch
A nested data-theme inside a scope still takes the page's data-solid style unless it sets data-solid itself. If a dark card inside a light scope looks off, set both.
For how the page-level attributes get applied in the first place, read the theme tokens page in this section.
