Skip to main content

Interface: CustomerTheme

Visual styling configuration for customer branding.

CustomerTheme defines the visual appearance of the configurator interface for a specific customer, including colors, styling, and interactive elements. These settings enable the configurator to match the customer's brand identity.

Consistent branding across all customer touchpoints strengthens brand recognition and creates a seamless experience between the configurator and other customer platforms.

Extended by​

Properties​

accentColor​

accentColor: string

Primary highlight color for interactive elements.

This color is used for buttons, selected states, and other interactive elements that need to stand out from the background. It typically aligns with the customer's primary brand color for consistent identity.

backgroundColor​

backgroundColor: string

Primary background color for the configurator interface.

This color serves as the base canvas for the configurator UI, setting the foundational tone for the interface. It should complement the customer's brand palette while ensuring good contrast for readability.

group?​

optional group: Partial<PaletteGroup>

Styling settings for option groups in the configurator.

These settings control the appearance of option groups, including colors for active, hover, and highlight states. Well-styled groups improve navigation and selection clarity in the configuration process.

hotSpots?​

optional hotSpots: CustomerHotSpots

Styling settings for hotspots on 3D models.

These settings control the appearance of interactive points on 3D models, including colors and borders. Distinctive hotspot styling helps users identify interactive elements within the visualization.

isWhiteButtonText?​

optional isWhiteButtonText: boolean

Determines if button text should be white regardless of background.

When true, text on buttons will always be white instead of dynamically adjusting based on background color. This override ensures consistent button appearance when the automatic contrast calculation might not align with brand guidelines.

mesh?​

optional mesh: Partial<PaletteMesh>

Styling settings for 3D mesh highlighting.

These settings control how selected parts of 3D models are visually highlighted, including overlay colors and effects. Clear highlighting helps users understand which components they're interacting with.

modularQuickIcons?​

optional modularQuickIcons: QuickIconsType[]

Quick action icons specific to modular products.

These define which quick actions are available when working with modular products. Appropriate quick actions streamline the modular configuration workflow for complex, multi-component products.

quickIcons?​

optional quickIcons: QuickIcons

Configuration for quick action icons in different contexts.

These settings define which quick actions are available on desktop versus mobile interfaces. Context-appropriate quick actions improve usability across different device types and screen sizes.