The current styling options for Intercom elements are very limited and do not allow consumers to effectively apply UI design systems and/or branding. In addition, the Intercom elements render within and `iframe` element and thus cannot be targeted directly by application styles. This, as in our case, means a dark-themed website cannot adjust the Intercom elements to match their existing UI styles - the elements always render with a white background, for example.
This can be quite jarring for users as any given element from Intercom will likely be the brightest thing rendered anywhere on a given dark-themed site. We, for example, are trying to use product tours as new features are launched, but the mismatch between our UI and that of Intercom means we lose any level of design alignment between our platform and Intercom.
This idea is meant to be a request to expand the number of styling options available for all Intercom elements embedded within a given project - particularly the messenger and product tours. Even just component background/divider/text/etc. colors would add a level of customization that would allow companies the ability to align Intercom with the UI/design of their own products much more effectively.
This could be implemented as additional options in the “Styling” sections of the relevant components, or additional fields in the Javascript API attributes - the latter already provides some styling options such as `vertical_padding` and `action_color`.
