📘
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:

NablaTheme.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 attribute	Description	Default value
`ConversationPreview.backgroundColor`	Background color for the conversations list view.	Colors.Background.base
`ConversationPreview.previewBackgroundColor`	Background color of a conversation in the conversations list.	Colors.Background.base
`ConversationPreview.previewTitleColor`	Color of the title of a conversation in the conversations list.	Colors.Text.base
`ConversationPreview.previewSubtitleColor`	Color of the subtitle or message preview of a conversation in the conversations list.	Colors.Text.subdued
`ConversationPreview.previewTimeLabelColor`	Color of the time of the last message of a conversation in the conversations list.	Colors.Text.subdued
`ConversationPreview.previewUnreadIndicatorColor`	Color of the dot indicator for an unread message for a conversation in the conversations list.	Colors.Text.accent
`ConversationPreview.previewTitleFont`	Font used for the title of a conversation in the conversations list.	Fonts.subtitleMedium
`ConversationPreview.previewUnreadTitleFont`	Font used for the title of an unread conversation in the conversations list.	Fonts.subtitleBold
`ConversationPreview.previewSubtitleFont`	Font used for the subtitle or message preview of a conversation in the conversations list.	Fonts.body
`ConversationPreview.previewSubtitleFont`	Font used for the subtitle or message preview of an unread conversation in the conversations list.	Fonts.bodyMedium
`ConversationPreview.previewTimeLabelFont`	Font used for the time of the last message of a conversation in the conversations list.	Fonts.smallText
`ConversationPreview.createConversationIcon`	UIImage used for the create conversation button in the Inbox view.	UIImage(systemName: "square.and.pencil")
`ConversationPreview.createConversationColor`	Color used for the create conversation button in the Inbox view.	Colors.Text.accent

Theme attribute	Description	Default value
`ConversationPreview.EmptyView.TextColor`	Color used for the message when the conversation list is empty.	Colors.Text.base
`ConversationPreview.EmptyView.Font`	Font used for the message when the conversation list is empty.	Fonts.subtitleMedium

Conversation

Theme attribute	Description	Default value
`Conversation.backgroundColor`	Background color for the conversation screen.	Colors.Background.base
`Conversation.headerTitleFont`	Font used for the title of a conversation in the conversation screen.	Fonts.subtitleBold
`Conversation.headerSubtitleFont`	Font used for the subtitle of a conversation in the conversation screen.	Fonts.smallText
`Conversation.headerTitleColor`	Color of the title of a conversation in the the conversation screen.	Colors.Text.base
`Conversation.headerSubtitleColor`	Color of the subtitle of a conversation in the the conversation screen.	Colors.Text.subdued
`Conversation.messageCornerRadius`	Corner radius used for all messages in the conversation screen.	CGFloat = 10
`Conversation.messagePatientBackgroundColor`	Background color used for all patient messages in the conversation screen.	Colors.Fill.accent
`Conversation.messageProviderBackgroundColor`	Background color used for all provider messages in the conversation screen.	Colors.Fill.base
`Conversation.messageOtherBackgroundColor`	Background color used for all other user messages in the conversation screen (may be system or another user).	Colors.Fill.base
`Conversation.messageAuthorLabelColor`	Color used to display the author for all provider messages in the conversation screen.	Colors.Text.subdued
`Conversation.messageAuthorLabelFont`	Font used to display the author for all provider messages in the conversation screen.	Fonts.smallText
`Conversation.messageFooterLabelFont`	Font used to display additional info for a message in the conversation screen (like sending status of a message).	Fonts.smallText
`Conversation.textMessagePatientTextColor`	Color used for text messages send by the patient.	Colors.Text.onAccent
`Conversation.textMessageProviderTextColor`	Color used for text messages send by a provider.	Colors.Text.base
`Conversation.textMessageOtherTextColor`	Color used for text messages send by another user (may be system or another patient).	Colors.Text.base
`Conversation.textMessageFont`	Font used for text messages.	Fonts.caption
`Conversation.deletedMessageBorderColor`	Color used for the borders of a deleted message.	Colors.Stroke.base
`Conversation.deletedMessageBackgroundColor`	Background color of a deleted message.	Colors.Background.base
`Conversation.deletedMessageTextColor`	Color used to display the "Deleted message" text.	Colors.Text.subdued
`Conversation.deletedMessageFont`	Font used to display the "Deleted message" text.	Fonts.bodyItalic
`Conversation.documentMessageIcon`	UIImage used as the document symbol for a document message in the conversation screen.	UIImage(systemName: "doc.text")
`Conversation.documentMessageTitleFont`	Font used to display the name of the document for a document message in the conversation screen.	Fonts.body
`Conversation.documentMessagePatientTitleColor`	Color used to display the name of the document for a document message sent by the patient in the conversation screen.	Colors.Text.onAccent
`Conversation.documentMessageProviderTitleColor`	Color used to display the name of the document for a document message sent by a provider in the conversation screen.	Colors.Text.base
`Conversation.documentMessageOtherTitleColor`	Color 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.typingIndicatorDotColor`	Color used to display the dots of the typing indicator when a provider is typing a message in the conversation screen.	Colors.Text.subdued
`Conversation.audioMessageDurationLabelFont`	Font used to display the duration of a voice message in the conversation screen.	Fonts.body
`Conversation.audioMessagePatientTitleColor`	Color used to display the duration of a voice message sent by a patient in the conversation screen	Colors.Text.onAccent
`Conversation.audioMessageProviderTitleColor`	Color used to display the duration of a voice message sent by a provider in the conversation screen	Colors.Text.base
`Conversation.audioMessageOtherTitleColor`	Color 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.videoCallActionRequestIcon`	Icon for the video call action requests in the conversation screen.	Internal asset
`Conversation.videoCallActionRequestButton`	Theme for the video call action requests button in the conversation screen.	Button.base
`Conversation.replyToPatientSeparatorColor`	Color used to display the separator on the left of a replied message, sent by a patient	Colors.Stroke.onAccent
`Conversation.replyToPatientPreviewColor`	Color used to display the preview of the message replied to by a patient	Colors.Text.onAccentSubdued
`Conversation.replyToProviderSeparatorColor`	Color used to display the separator on the left of a replied message, sent by a provider	Colors.Stroke.base
`Conversation.replyToProviderPreviewColor`	Color used to display the preview of the message replied to by a provider	Colors.Text.subdued
`Conversation.replyToOtherPreviewColor`	Color used to display the preview of the message replied to by another user (may be system or another patient).	Colors.Text.subdued
`Conversation.replyToAuthorFont`	Font used to display the author of the message replied to	Fonts.body
`Conversation.replyToPreviewFont`	Font used to display the preview of the message replied to	Fonts.smallText
`Conversation.replyToImageIcon`	UIImage used as the preview of an image replied to	UIImage(systemName: "photo")
`Conversation.replyToVideoIcon`	UIImage used as the preview of a video replied to	UIImage(systemName: "video.fill")
`Conversation.replyToDocumentIcon`	UIImage used as the preview of a document replied to	UIImage(systemName: "doc")
`Conversation.replyToAudioIcon`	UIImage used as the preview of an audio message replied to	UIImage(systemName: "mic")
`Conversation.dateSeparatorFont`	Font used to display the text for date separators.	Fonts.smallText
`Conversation.dateSeparatorColor`	Color used to display the text for date separators.	Colors.Text.subdued
`Conversation.conversationActivityFont`	Font used to display the activities in a conversation (such as when a provider joins).	Fonts.smallText
`Conversation.conversationActivityColor`	Color used to display the activities in a conversation (such as when a provider joins).	Colors.Text.subdued
`Conversation.composerBackgroundColor`	Background color of the message composer in the conversation screen.	Colors.Background.base
`Conversation.composerButtonTintColor`	Color used to tint buttons in the composer in the conversation screen.	Colors.Stroke.subdued
`Conversation.composerButtonHighlightedTintColor`	Color used to tint highlighted buttons in the composer in the conversation screen.	Colors.Stroke.accent
`Conversation.composerTextColor`	Color used to display the text entered by the user in the composer in the conversation screen.	Colors.Stroke.subdued
`Conversation.composerFont`	Font used for the text entered by the user in the composer in the conversation screen.	Fonts.body
`Conversation.sendIcon`	UIImage used for the send button in the composer in the conversation screen.	UIImage(systemName: "arrow.up.circle.fill")
`Conversation.sendIconDisabled`	UIImage used for the send button disabled satte in the composer in the conversation screen.	UIImage(systemName: "arrow.up.circle.fill")
`Conversation.addMediaIcon`	UIImage used for the add media button in the composer in the conversation screen.	UIImage(systemName: "plus")
`Conversation.recordAudioIcon`	UIImage used for the record audio button in the composer in the conversation screen.	UIImage(systemName: "mic")
`Conversation.deleteAudioRecordingIcon`	UIImage used for the cancel button to delete a recording in progress.	UIImage(systemName: "trash")
`Conversation.mediaComposerDocumentIcon`	UIImage used to represent a document to send in the composer in the conversation screen.	UIImage(systemName: "doc")
`Conversation.mediaComposerDeleteButtonIcon`	UIImage used for the delete button for a document to send in the composer in the conversation screen.	UIImage(systemName: "x.circle.fill")
`Conversation.mediaComposerDocumentTintColor`	Color used to tint the document icon for a document to send in the composer in the conversation screen.	Colors.Text.subdued
`Conversation.mediaComposerBackgroundColor`	Color of the background of the media composer in the conversation screen.	Colors.Fill.card
`Conversation.mediaComposerDeleteButtonTintColor`	Color used to tint the delete button for a media to send in the composer in the conversation screen.	Colors.Stroke.base
`Conversation.mediaComposerDeleteButtonBackgroundColor`	Background color of the delete button for a media to send in the composer in the conversation screen.	Colors.Stroke.onAccent
`Conversation.audioComposerBackgroundColor`	Background color used to display the current recording time on the composer.	Colors.Fill.accent
`Conversation.audioComposerDurationTextColor`	Color of the text used to display the current recording time on the composer.	Colors.Text.onAccent
`Conversation.audioComposerRecordIndicatorColor`	Color of the recording indicator on the composer.	Colors.Fill.danger
`Conversation.composerReplyToBorderColor`	Border color on top of the reply composer	Colors.Stroke.subdued
`Conversation.composerReplyToAuthorColor`	Color of the text used to display the author of the message the user replies to	Colors.Text.base
`Conversation.composerReplyToAuthorFont`	Font of the text used to display the author of the message the user replies to	Fonts.body
`Conversation.composerReplyToPreviewColor`	Color of the text used to display the preview of the message the user replies to	Colors.Text.subdued
`Conversation.composerReplyToPreviewFont`	Font of the text used to display the author of the message the user replies to	Fonts.smallText
`Conversation.composerReplyToCloseButtonImage`	UIImage used for the delete button for the reply composer	UIImage(systemName: "xmark.circle.fill")
`Conversation.composerReplyToCloseButtonColor`	Color of the delete button for the reply composer	Colors.Fill.subdued

ErrorView

Theme attribute	Description	Default value
`ErrorView.labelFont`	Font used to display the text explaining the error in the conversations list view or in the conversation list.	Fonts.bodyItalic
`ErrorView.labelColor`	Color of the text explaining the error in the conversations list view or in the conversation list.	Colors.Text.base
`ErrorView.retryButtonTitleFont`	Font used for the retry button on error in the conversations list view or in the conversation list.	Fonts.body
`ErrorView.retryButtonTitleColor`	Color of the retry button on error in the conversations list view or in the conversation list.	Colors.Text.accent

ImageDetail

Theme attribute	Description	Default value
`ImageDetail.backgroundColor`	Color used for the background of the full screen viewer for an image.	Colors.Background.base
`ImageDetail.iconsTintColor`	UIIColor used to tint the buttons in the full screen viewer for an image.	Colors.Stroke.accent

DocumentDetail

Theme attribute	Description	Default value
`DocumentDetail.iconsTintColor`	UIIColor used to tint the buttons in the full screen viewer for a document.	Colors.Stroke.accent