UI components customisation

Nabla iOS Messaging UI components customisation

📘

This part is only about Messaging-specific theme attribute, make sure you followed the SDK theming guide for the theme setup.

Messaging specific attributes

You can override Messaging specific attributes by overriding them in the NablaTheme. Here's how it works:

ConversationPreview.backgroundColor = UIColor(red: 0.95, green: 0.96, blue: 0.98, alpha: 1.00)

Customizable elements

Here's the list of items you can customize:

ConversationPreview

Theme attributeDescriptionDefault value
ConversationPreview.backgroundColorBackground color for the conversations list view.Colors.Background.base
ConversationPreview.previewBackgroundColorBackground color of a conversation in the conversations list.Colors.Background.base
ConversationPreview.previewTitleColorColor of the title of a conversation in the conversations list.Colors.Text.base
ConversationPreview.previewSubtitleColorColor of the subtitle or message preview of a conversation in the conversations list.Colors.Text.subdued
ConversationPreview.previewTimeLabelColorColor of the time of the last message of a conversation in the conversations list.Colors.Text.subdued
ConversationPreview.previewUnreadIndicatorColorColor of the dot indicator for an unread message for a conversation in the conversations list.Colors.Text.accent
ConversationPreview.previewTitleFontFont used for the title of a conversation in the conversations list.Fonts.subtitleMedium
ConversationPreview.previewUnreadTitleFontFont used for the title of an unread conversation in the conversations list.Fonts.subtitleBold
ConversationPreview.previewSubtitleFontFont used for the subtitle or message preview of a conversation in the conversations list.Fonts.body
ConversationPreview.previewSubtitleFontFont used for the subtitle or message preview of an unread conversation in the conversations list.Fonts.bodyMedium
ConversationPreview.previewTimeLabelFontFont used for the time of the last message of a conversation in the conversations list.Fonts.smallText
ConversationPreview.createConversationIconUIImage used for the create conversation button in the Inbox view.UIImage(systemName: "square.and.pencil")
ConversationPreview.createConversationColorColor used for the create conversation button in the Inbox view.Colors.Text.accent
Theme attributeDescriptionDefault value
ConversationPreview.EmptyView.TextColorColor used for the message when the conversation list is empty.Colors.Text.base
ConversationPreview.EmptyView.FontFont used for the message when the conversation list is empty.Fonts.subtitleMedium

Conversation

Theme attributeDescriptionDefault value
Conversation.backgroundColorBackground color for the conversation screen.Colors.Background.base
Conversation.headerTitleFontFont used for the title of a conversation in the conversation screen.Fonts.subtitleBold
Conversation.headerSubtitleFontFont used for the subtitle of a conversation in the conversation screen.Fonts.smallText
Conversation.headerTitleColorColor of the title of a conversation in the the conversation screen.Colors.Text.base
Conversation.headerSubtitleColorColor of the subtitle of a conversation in the the conversation screen.Colors.Text.subdued
Conversation.messageCornerRadiusCorner radius used for all messages in the conversation screen.CGFloat = 10
Conversation.messagePatientBackgroundColorBackground color used for all patient messages in the conversation screen.Colors.Fill.accent
Conversation.messageProviderBackgroundColorBackground color used for all provider messages in the conversation screen.Colors.Fill.base
Conversation.messageOtherBackgroundColorBackground color used for all other user messages in the conversation screen (may be system or another user).Colors.Fill.base
Conversation.messageAuthorLabelColorColor used to display the author for all provider messages in the conversation screen.Colors.Text.subdued
Conversation.messageAuthorLabelFontFont used to display the author for all provider messages in the conversation screen.Fonts.smallText
Conversation.messageFooterLabelFontFont used to display additional info for a message in the conversation screen (like sending status of a message).Fonts.smallText
Conversation.textMessagePatientTextColorColor used for text messages send by the patient.Colors.Text.onAccent
Conversation.textMessageProviderTextColorColor used for text messages send by a provider.Colors.Text.base
Conversation.textMessageOtherTextColorColor used for text messages send by another user (may be system or another patient).Colors.Text.base
Conversation.textMessageFontFont used for text messages.Fonts.caption
Conversation.deletedMessageBorderColorColor used for the borders of a deleted message.Colors.Stroke.base
Conversation.deletedMessageBackgroundColorBackground color of a deleted message.Colors.Background.base
Conversation.deletedMessageTextColorColor used to display the "Deleted message" text.Colors.Text.subdued
Conversation.deletedMessageFontFont used to display the "Deleted message" text.Fonts.bodyItalic
Conversation.documentMessageIconUIImage used as the document symbol for a document message in the conversation screen.UIImage(systemName: "doc.text")
Conversation.documentMessageTitleFontFont used to display the name of the document for a document message in the conversation screen.Fonts.body
Conversation.documentMessagePatientTitleColorColor used to display the name of the document for a document message sent by the patient in the conversation screen.Colors.Text.onAccent
Conversation.documentMessageProviderTitleColorColor used to display the name of the document for a document message sent by a provider in the conversation screen.Colors.Text.base
Conversation.documentMessageOtherTitleColorColor used to display the name of the document for a document message sent by another user in the conversation screen (may be system or another patient)Colors.Text.base
Conversation.typingIndicatorDotColorColor used to display the dots of the typing indicator when a provider is typing a message in the conversation screen.Colors.Text.subdued
Conversation.audioMessageDurationLabelFontFont used to display the duration of a voice message in the conversation screen.Fonts.body
Conversation.audioMessagePatientTitleColorColor used to display the duration of a voice message sent by a patient in the conversation screenColors.Text.onAccent
Conversation.audioMessageProviderTitleColorColor used to display the duration of a voice message sent by a provider in the conversation screenColors.Text.base
Conversation.audioMessageOtherTitleColorColor used to display the duration of a voice message sent by another user in the conversation screen (might be system or another patient).Colors.Text.base
Conversation.videoCallActionRequestButtonTheme for the video call action requests button in the conversation screen.Button.base
Conversation.replyToPatientSeparatorColorColor used to display the separator on the left of a replied message, sent by a patientColors.Stroke.onAccent
Conversation.replyToPatientPreviewColorColor used to display the preview of the message replied to by a patientColors.Text.onAccentSubdued
Conversation.replyToProviderSeparatorColorColor used to display the separator on the left of a replied message, sent by a providerColors.Stroke.base
Conversation.replyToProviderPreviewColorColor used to display the preview of the message replied to by a providerColors.Text.subdued
Conversation.replyToOtherPreviewColorColor used to display the preview of the message replied to by another user (may be system or another patient).Colors.Text.subdued
Conversation.replyToAuthorFontFont used to display the author of the message replied toFonts.body
Conversation.replyToPreviewFontFont used to display the preview of the message replied toFonts.smallText
Conversation.replyToImageIconUIImage used as the preview of an image replied toUIImage(systemName: "photo")
Conversation.replyToVideoIconUIImage used as the preview of a video replied toUIImage(systemName: "video.fill")
Conversation.replyToDocumentIconUIImage used as the preview of a document replied toUIImage(systemName: "doc")
Conversation.replyToAudioIconUIImage used as the preview of an audio message replied toUIImage(systemName: "mic")
Conversation.dateSeparatorFontFont used to display the text for date separators.Fonts.smallText
Conversation.dateSeparatorColorColor used to display the text for date separators.Colors.Text.subdued
Conversation.conversationActivityFontFont used to display the activities in a conversation (such as when a provider joins).Fonts.smallText
Conversation.conversationActivityColorColor used to display the activities in a conversation (such as when a provider joins).Colors.Text.subdued
Conversation.composerBackgroundColorBackground color of the message composer in the conversation screen.Colors.Background.base
Conversation.composerButtonTintColorColor used to tint buttons in the composer in the conversation screen.Colors.Stroke.subdued
Conversation.composerButtonHighlightedTintColorColor used to tint highlighted buttons in the composer in the conversation screen.Colors.Stroke.accent
Conversation.composerTextColorColor used to display the text entered by the user in the composer in the conversation screen.Colors.Stroke.subdued
Conversation.composerFontFont used for the text entered by the user in the composer in the conversation screen.Fonts.body
Conversation.sendIconUIImage used for the send button in the composer in the conversation screen.UIImage(systemName: "arrow.up.circle.fill")
Conversation.sendIconDisabledUIImage used for the send button disabled satte in the composer in the conversation screen.UIImage(systemName: "arrow.up.circle.fill")
Conversation.addMediaIconUIImage used for the add media button in the composer in the conversation screen.UIImage(systemName: "plus")
Conversation.recordAudioIconUIImage used for the record audio button in the composer in the conversation screen.UIImage(systemName: "mic")
Conversation.deleteAudioRecordingIconUIImage used for the cancel button to delete a recording in progress.UIImage(systemName: "trash")
Conversation.mediaComposerDocumentIconUIImage used to represent a document to send in the composer in the conversation screen.UIImage(systemName: "doc")
Conversation.mediaComposerDeleteButtonIconUIImage used for the delete button for a document to send in the composer in the conversation screen.UIImage(systemName: "x.circle.fill")
Conversation.mediaComposerDocumentTintColorColor used to tint the document icon for a document to send in the composer in the conversation screen.Colors.Text.subdued
Conversation.mediaComposerBackgroundColorColor of the background of the media composer in the conversation screen.Colors.Fill.card
Conversation.mediaComposerDeleteButtonTintColorColor used to tint the delete button for a media to send in the composer in the conversation screen.Colors.Stroke.base
Conversation.mediaComposerDeleteButtonBackgroundColorBackground color of the delete button for a media to send in the composer in the conversation screen.Colors.Stroke.onAccent
Conversation.audioComposerBackgroundColorBackground color used to display the current recording time on the composer.Colors.Fill.accent
Conversation.audioComposerDurationTextColorColor of the text used to display the current recording time on the composer.Colors.Text.onAccent
Conversation.audioComposerRecordIndicatorColorColor of the recording indicator on the composer.Colors.Fill.danger
Conversation.composerReplyToBorderColorBorder color on top of the reply composerColors.Stroke.subdued
Conversation.composerReplyToAuthorColorColor of the text used to display the author of the message the user replies toColors.Text.base
Conversation.composerReplyToAuthorFontFont of the text used to display the author of the message the user replies toFonts.body
Conversation.composerReplyToPreviewColorColor of the text used to display the preview of the message the user replies toColors.Text.subdued
Conversation.composerReplyToPreviewFontFont of the text used to display the author of the message the user replies toFonts.smallText
Conversation.composerReplyToCloseButtonImageUIImage used for the delete button for the reply composerUIImage(systemName: "xmark.circle.fill")
Conversation.composerReplyToCloseButtonColorColor of the delete button for the reply composerColors.Fill.subdued

ErrorView

Theme attributeDescriptionDefault value
ErrorView.labelFontFont used to display the text explaining the error in the conversations list view or in the conversation list.Fonts.bodyItalic
ErrorView.labelColorColor of the text explaining the error in the conversations list view or in the conversation list.Colors.Text.base
ErrorView.retryButtonTitleFontFont used for the retry button on error in the conversations list view or in the conversation list.Fonts.body
ErrorView.retryButtonTitleColorColor of the retry button on error in the conversations list view or in the conversation list.Colors.Text.accent

ImageDetail

Theme attributeDescriptionDefault value
ImageDetail.backgroundColorColor used for the background of the full screen viewer for an image.Colors.Background.base
ImageDetail.iconsTintColorUIIColor used to tint the buttons in the full screen viewer for an image.Colors.Stroke.accent

DocumentDetail

Theme attributeDescriptionDefault value
DocumentDetail.iconsTintColorUIIColor used to tint the buttons in the full screen viewer for a document.Colors.Stroke.accent