Customize UI components

Global theme

Our UI components uses a multi-level theme system. The first level is the global NablaTheme and can be configured from anywhere:

NablaTheme.primaryColor = .blue
NablaTheme.body = UIFont(name: "myFont", size: 16)!

// NablaTheme contains many other properties for you to customize

Components specific theming

Then each component has it own theme object that will take values from NablaTheme by default but can be overridden:

NablaTheme.Conversation.messagePatientBackgroundColor = .black // Defaults to NablaTheme.primaryTextColor
NablaTheme.Conversation.composerFont = UIFont(name: "myFont", size: 16)! // Defaults to NablaTheme.body
NablaTheme.Conversation.sendIcon = UIImage(named: "sendIcon.png") // Defaults to UIImage(systemName: "arrow.up.circle.fill")

Details

ConversationPreview

Theme attributeDescriptionDefault value
Conversation.backgroundColorBackground color for the conversations list view.NablaTheme.backgroundColor
Conversation.previewBackgroundColorBackground color of a conversation in the conversations list.NablaTheme.backgroundColor
Conversation.previewTitleColorColor of the title of a conversation in the conversations list.NablaTheme.primaryTextColor
Conversation.previewSubtitleColorColor of the subtitle or message preview of a conversation in the conversations list.NablaTheme.secondaryTextColor
Conversation.previewTimeLabelColorColor of the time of the last message of a conversation in the conversations list.NablaTheme.secondaryTextColor
Conversation.previewUnreadIndicatorColorColor of the dot indicator for an unread message for a conversation in the conversations list.NablaTheme.primaryColor
Conversation.previewTitleFontFont used for the title of a conversation in the conversations list.NablaTheme.body
Conversation.previewSubtitleFontFont used for the subtitle or message preview of a conversation in the conversations list.NablaTheme.subhead
Conversation.previewTimeLabelFontFont used for the time of the last message of a conversation in the conversations list.NablaTheme.footnote

Conversation

Theme attributeDescriptionDefault value
Conversation.backgroundColorBackground color for the conversation screen.NablaTheme.backgroundColor
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.NablaTheme.primaryColor
Conversation.messageProviderBackgroundColorBackground color used for all provider messages in the conversation screen.NablaTheme.secondaryBackgroundColor
Conversation.messageAuthorLabelColorColor used to display the author for all provider messages in the conversation screen.NablaTheme.secondaryTextColor
Conversation.messageAuthorLabelFontFont used to display the author for all provider messages in the conversation screen.NablaTheme.footnote
Conversation.messageFooterLabelFontFont used to display additional info for a message in the conversation screen (like sending status of a message).NablaTheme.footnote
Conversation.textMessagePatientTextColorColor used for text messages send by the patient.NablaTheme.alternateTextColor
Conversation.textMessageProviderTextColorColor used for text messages send by a provider.NablaTheme.primaryTextColor
Conversation.textMessageFontFont used for text messages.NablaTheme.body
Conversation.deletedMessageBorderColorColor used for the borders of a deleted message.NablaTheme.secondaryTextColor
Conversation.deletedMessagebackgroundColorBackground color of a deleted message.NablaTheme.backgroundColor
Conversation.deletedMessagetextColorColor used to display the "Deleted message" text.NablaTheme.secondaryTextColor
Conversation.deletedMessagefontFont used to display the "Deleted message" text.NablaTheme.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.NablaTheme.body
Conversation.documentMessagePatientTitleColorColor used to display the name of the document for a document message sent by the patient in the conversation screen.NablaTheme.alternateTextColor
Conversation.documentMessageProviderTitleColorColor used to display the name of the document for a document message sent by a provider in the conversation screen.NablaTheme.primaryTextColor
Conversation.typingIndicatorDotColorColor used to display the dots of the typing indicator when a provider is typing a message in the conversation screen.NablaTheme.primaryColor
Conversation.audioMessageDurationLabelFontFont used to display the duration of a voice message in the conversation screen.NablaTheme.body
Conversation.audioMessagePatientTitleColorColor used to display the duration of a voice message sent by a patient in the conversation screenNablaTheme.alternateTextColor
Conversation.audioMessageProviderTitleColorColor used to display the duration of a voice message sent by a provider in the conversation screenNablaTheme.primaryTextColor
Conversation.textSeparatorFontFont used to display the text for date separators & conversation events.NablaTheme.footnote
Conversation.textSeparatorColorColor used to display the text for date separators & conversation events.NablaTheme.secondaryTextColor
Conversation.composerBackgroundColorBackground color of the message composer in the conversation screen.NablaTheme.backgroundColor
Conversation.composerButtonTintColorColor used to tint buttons in the composer in the conversation screen.NablaTheme.accessoryColor
Conversation.composerTextColorColor used to display the text entered by the user in the composer in the conversation screen.NablaTheme.primaryTextColor
Conversation.composerFontFont used for the text entered by the user in the composer in the conversation screen.NablaTheme.body
Conversation.sendIconUIImage used for the send button in the composer in the conversation screen.UIImage(systemName: "paperplane.fill")
Conversation.sendIconDisabledUIImage used for the send button disabled satte in the composer in the conversation screen.UIImage(systemName: "paperplane")
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.NablaTheme.alternateTextColor
Conversation.mediaComposerBackgroundColorColor of the background of the media composer in the conversation screen.NablaTheme.secondaryBackgroundColor
Conversation.mediaCompsoerDeleteButtonTintColorColor used to tint the delete button for a media to send in the composer in the conversation screen.NablaTheme.primaryTextColor
Conversation.mediaComposerDeleteButtonBackgroundColorBackground color of the delete button for a media to send in the composer in the conversation screen.NablaTheme.backgroundColor
Conversation.audioComposerBackgroundColorBackground color used to display the current recording time on the composer.NablaTheme.primaryColor
Conversation.audioComposerDurationTextColorColor of the text used to display the current recording time on the composer.NablaTheme.alternateTextColor
Conversation.audioComposerRecordIndicatorColorColor of the recording indicator on the composer.UIColor.red

ErrorView

Theme attributeDescriptionDefault value
Conversation.labelFontFont used to display the text explaining the error in the conversations list view or in the conversation list.NablaTheme.bodyItalic
Conversation.labelColorColor of the text explaining the error in the conversations list view or in the conversation list.NablaTheme.secondaryTextColor
Conversation.retryButtonTitleFontFont used for the retry button on error in the conversations list view or in the conversation list.NablaTheme.body
Conversation.retryButtonTitleColorColor of the retry button on error in the conversations list view or in the conversation list.NablaTheme.primaryColor

Shared

Theme attributeDescriptionDefault value
Conversation.loadingViewIndicatorTintColorTint color used for the loading indicator.NablaTheme.primaryColor
Conversation.avatarViewBackgroundColorBackground color used to display the avatar of someone who doesn't have a profile picture.NablaTheme.primaryColor

ImageDetail

Theme attributeDescriptionDefault value
Conversation.backgroundColorColor used for the background of the full screen viewer for an image.NablaTheme.backgroundColor

Did this page help you?