Theme
Updated: Sep 1, 2026
UiSetTheme supplies the design foundation that every component in the
Meta VR UI Set SDK reads. Wrap your content in it once, near the root of the composition. The defaults are complete on their own: a dark color scheme, Meta VR typography and shapes, and standard component geometry.
import metavrx.uiset.compose.Surface
import metavrx.uiset.compose.theme.UiSetTheme
UiSetTheme {
Surface {
AppContent()
}
}
- Complete defaults: Every foundation has a usable value, so the theme renders the standard appearance with no arguments.
- Semantic roles: Components read meaning such as
accent or negative rather than a named color, so a scheme change carries through to all of them. - Focused copies: Each foundation is an immutable value, so
copy() changes one property without replacing the group. - Nesting: A nested
UiSetTheme overrides a foundation for the content inside it. - Read access: Inside the theme,
UiSetTheme.colorScheme, .typography, .shapes, .dimensions, and .indications return the active values.
- Value:
darkColorScheme() or lightColorScheme() - Roles:
background, surface, and surfaceVariant for hierarchy; accent, accentMuted, and selected for emphasis; positive, negative, warning, and notification for status. - Structure: Hierarchy and emphasis roles are
ColorRole values that pair a container brush with ContentColors. Status roles are StatusColors. Keep a container and its content together so contrast holds.
- Value:
TypographyDefaults.Platform for the Meta VR Optimistic family, or .Portable for bundled Inter - Styles:
display, headline, title, label, body, bodySmall, and caption, plus bodyStrong and bodySmallStrong.
- Value:
ShapeDefaults.Platform - Roles:
button, buttonTile, card, control, dialog, menu, menuItem, textField, tooltip, and pill.
- Value:
DimensionDefaults.Standard or DimensionDefaults.Compact - Contents: Per-component geometry plus a
spacing scale from 4 dp to 32 dp. Compact shrinks artwork, and interactive targets stay at least 48 dp in both modes.
- Value:
UiSetIndicationConfig, holding a default and a subtle spec - Split: Each spec separates the indication drawn before clipping from the one drawn after, so a press transform escapes the clip and a scrim stays inside it.
Pass a different foundation to change it wholesale.
import metavrx.uiset.compose.theme.DimensionDefaults
import metavrx.uiset.compose.theme.TypographyDefaults
import metavrx.uiset.compose.theme.UiSetTheme
import metavrx.uiset.compose.theme.lightColorScheme
UiSetTheme(
colorScheme = lightColorScheme(),
typography = TypographyDefaults.Portable,
dimensions = DimensionDefaults.Compact,
) {
AppContent()
}
For a single brand accent, withAccent picks a light or dark foreground that reaches at least 4.5:1 contrast and updates both the accent and selected roles.
import metavrx.uiset.compose.theme.Palette
import metavrx.uiset.compose.theme.darkColorScheme
import metavrx.uiset.compose.theme.withAccent
UiSetTheme(colorScheme = darkColorScheme().withAccent(Palette.Pink40)) {
AppContent()
}
Typography, Shapes, and Dimensions are interfaces, so a complete replacement implements them directly. UI Set clamps any custom minimum interactive size to 48 dp at component boundaries.
colorScheme: ColorScheme: Semantic container, content, status, interaction, and progress colors.typography: Typography: Semantic text styles.shapes: Shapes: Component shape roles.dimensions: Dimensions: Density-aware component geometry and spacing.indications: UiSetIndicationConfig: Press, hover, and focus policies for interactive components.content: @Composable () -> Unit: The themed content.
Change a foundation rather than a component when the adjustment should apply everywhere, and reach for a component’s own colors or dimensions only for a deliberate one-off.