amezquita design systemGet started

Composition

ThemeScope

Gives one part of a page its own brand, mode, or both; overlays opened inside it (Dialog, Drawer, AlertDialog, Menu, Select, Tooltip) take the same, although they render at the end of the page

Markdown version for agents

Import
import { ThemeScope } from '@amezquita/design-system/components/composition/ThemeScope'

Live render

A light part of the page.

A dark part of the page.

    Props

    PropTypeDescription
    brand?'portfolio'A brand for this part of the page. Needs that brand's scoped CSS loaded (styles/brands/portfolio-scoped.css). Left out, the part keeps the brand around it.
    mode?'light' | 'dark'light or dark for this part of the page. Left out, the part follows the mode around it.

    Also accepts all props of: React.ComponentPropsWithoutRef<'div'>

    Usage example

    tsx
    <ThemeScope brand="portfolio" mode="dark" style={{ padding: 'var(--space-container-padding)', background: 'var(--color-surface-primary)', color: 'var(--color-text-primary)' }}>
  <p>This part of the page is dark. The page around it isn’t.</p>
  <Menu
    aria-label="Project actions"
    trigger={<Button variant="secondary">More</Button>}
    groups={[{ items: [{ id: 'export', label: 'Export tokens', onSelect: () => {} }] }]}
  />
</ThemeScope>

    Accessibility

    • A plain <div> with no role; it adds nothing to the accessibility tree
    • Overlays keep their own focus, keyboard and layering behaviour: the scope's attributes go on the elements they already portal, so no wrapper is added (decisions/0021)