Develop

Theme

Updated: Sep 1, 2026

Overview

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()
    }
}

Common features

  • 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.

Foundations

Color scheme

  • 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.

Typography

  • 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.

Shapes

  • Value: ShapeDefaults.Platform
  • Roles: button, buttonTile, card, control, dialog, menu, menuItem, textField, tooltip, and pill.

Dimensions

  • 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.

Interaction feedback

  • 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.

Customize

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.

Common parameters

  • 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.