Skip to main content

Interface: Theme

Configuration for customer theme settings.

Theme provides the comprehensive visual theming system for the configurator, including color palettes, typography, spacing, transitions, and media queries. It defines the complete visual language used throughout the configurator interface.

A cohesive theme creates a visually unified experience that reinforces the customer's brand identity while ensuring usability and accessibility.

Properties​

adjustToContainer?​

optional adjustToContainer: boolean

When true, the configurator adjusts to fit its container element.

This allows the configurator to be embedded within layouts of varying sizes while maintaining proper proportions. Dynamic sizing improves integration flexibility within different page contexts.

color​

color: Record<string, string>

Additional named colors for specific use cases.

These colors supplement the main palette with specialized colors for particular UI elements or states.

font​

font: Font

Typography configuration.

Defines the fonts, sizes, and weights used for text throughout the interface. Typography is a fundamental aspect of the visual system that affects both aesthetics and readability.

isCustomBackground?​

optional isCustomBackground: boolean

When true, a custom background is being used.

This flag indicates that the background is not using the default system background and may have special handling requirements. Custom backgrounds can provide branded environments for product visualization.

media​

media: MediaQueries

Responsive breakpoints and media queries.

Defines the viewport size breakpoints used for responsive layout adaptations across different device sizes. Proper breakpoints ensure the interface works well from mobile to desktop.

palette​

palette: Palette

Color palette configuration.

Defines the complete set of colors used throughout the interface, including primary colors, accents, status indicators, and specialized component colors.

transitions​

transitions: Transitions

Animation timing settings.

Controls the duration and easing of transitions and animations throughout the interface. Consistent animation timing creates a sense of polish and responsiveness.