UI Toolkit for Meta Ray-Ban Display theming and color

The toolkit exposes semantic theme roles as --uit-* CSS custom properties and constrained component enums. Choose roles by meaning, not by matching a screenshot's RGB value.

Read:

• Theming and customization
• ../building-uit-interfaces-web/references/tokens-materials-motion.md
• ../uit-materials-web/references/color-gradient-recipes.md for material ramps.

Choose the customization surface

• App/subtree-wide semantic role change: override supported --uit-color-* or --uit-spacing-* roles on [data-app-root] or a scoped ancestor. Use --uit-corner-radius-* tokens in authored CSS without redefining them.
• Text role: use TextColor and TextStyle/TextAppearance.
• Component content role: use SubtitleTextColor, TimestampTextColor, IconTintColor, or the component's variant enum.
• StaticContainer, Container, or Surface material paint across their supported visual states: pass a compatible ContainerMaterial. The API name does not make Container the privileged or default material host.
• One-off layout arrangement: CSS using spacing tokens; do not repaint component internals.