Themes and materials

Wrap a subtree in UIProvider. Theme changes stay scoped, including portaled dialogs; nested providers inherit unspecified options.

import { UIProvider, Glass, Button, Menu } from '@swiftuijs/ui';

const items = [{ label: 'Edit' }, { label: 'Delete', destructive: true }];

<UIProvider
  theme="light"
  accentColor="#7952B3"
  glass={{ enabled: true, intensity: 0.6, variant: 'regular' }}
  tokens={{ '--sw-radius-sheet': '28px' }}
>
  <Glass><Button buttonStyle="borderedProminent">Continue</Button></Glass>
  <Menu glass={false} trigger={<Button>Actions</Button>} items={items} />
</UIProvider>

Theme and tokens

theme accepts light, dark, or system. CSS resolves the system preference without changing the server markup. tokens accepts --sw-* CSS variables; you can also override them in your own stylesheet. Keep accent colors readable in both themes.

Glass configuration

Liquid Glass is off by default. glass accepts a boolean or { enabled, intensity, variant }; intensity is clamped to 0–1 and zero disables the effect. The preference applies to Glass, menu/context menu/popover surfaces, navigation controls, toolbar groups and tab bars. Each supports a local glass override. Content regions, cards and sheet bodies remain opaque; use standard Sheet.backgroundStyle materials for content separation.

Requirements and fallbacks

The regular variant favors legibility. Use clear only over visually rich backgrounds and verify contrast. This is a CSS material with blur, saturation, highlights and depth; native optical refraction and system vibrancy are not reproduced. It adds no graphics engine or continuously running animation.

Reduced transparency, increased contrast and forced colors fall back to an opaque surface. Browsers without backdrop-filter also retain an opaque background. Test the material with your actual content, and use glass={false} for surfaces where effects are unnecessary.