UI components customisation

Nabla iOS Scheduling UI components customisation

📘

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

Scheduling specific attributes

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

NablaTheme.AppointmentConfirmationTheme.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:

AppointmentListViewTheme

Theme attributeDescriptionDefault value
AppointmentListViewTheme.backgroundColorColor used for the background of the appointment list view.Colors.Background.underCard
AppointmentListViewTheme.emptyViewTextColorColor used for the text of the empty state where no appointments are scheduled.Colors.Text.base
AppointmentListViewTheme.emptyViewFontFont used for the text of the empty state where no appointments are scheduled.Fonts.caption
AppointmentListViewTheme.buttonStyle of the button used to schedule a new appointment.Button.accent
AppointmentListViewTheme.CellTheme.backgroundColorColor used for the background of an appointment cell.Colors.Fill.card
AppointmentListViewTheme.CellTheme.titleColorColor used for the name of the doctor of an upcoming appointment.Colors.Text.base
AppointmentListViewTheme.CellTheme.titleDisabledColorColor used for the name of the doctor of a past appointment.Colors.Text.subdued
AppointmentListViewTheme.CellTheme.titleFontFont used for the name of the doctor of an appointment.Fonts.subtitleBold
AppointmentListViewTheme.CellTheme.subtitleColorColor used for the time of an upcoming appointment.Colors.Text.subdued
AppointmentListViewTheme.CellTheme.subtitleDisabledColorColor used for the time of a past appointment.Colors.Text.subdued
AppointmentListViewTheme.CellTheme.subtitleFontFont used for the time of an appointment.Fonts.body
AppointmentListViewTheme.CellTheme.moreButtonColorColor of the button to edit an upcoming appointment.Colors.Text.subdued
AppointmentListViewTheme.CellTheme.buttonStyle of the button to join an appointment via video call.Button.accentSubdued

CategoryPickerViewTheme

Theme attributeDescriptionDefault value
CategoryPickerViewTheme.backgroundColorBackground color for the category picker view.Colors.Background.underCard
CategoryPickerViewTheme.emptyViewTextColorColor of the text displayed when there are no categories available.Colors.Text.base
CategoryPickerViewTheme.emptyViewFontFont of the text displayed when there are no categories available.Fonts.caption
CategoryPickerViewTheme.CellTheme.backgroundColorColor of the background of the cell of a category.Colors.Fill.card
CategoryPickerViewTheme.CellTheme.textColorColor of the text displayed with the name of a category.Colors.Text.base
CategoryPickerViewTheme.CellTheme.fontFont of the text displayed with the name of a category.Fonts.subtitleMedium
CategoryPickerViewTheme.CellTheme.indicatorColorTint color used for the tap indicator of the cell of a category.Colors.Text.base

TimeSlotPickerViewTheme

Theme attributeDescriptionDefault value
TimeSlotPickerViewTheme.backgroundColorBackground color for the time slot picker view.Colors.Background.underCard
TimeSlotPickerViewTheme.buttonTheme used for the button to continue in the time slot picker view.Button.accent
TimeSlotPickerViewTheme.CellTheme.backgroundColorColor of the background of the cell for a day in the time slot picker view.Colors.Fill.card
TimeSlotPickerViewTheme.CellTheme.titleColorColor of the date of a day in the time slot picker view.Colors.Text.base
TimeSlotPickerViewTheme.CellTheme.titleFontFont of the date of a day in the time slot picker view.Fonts.subtitleMedium
TimeSlotPickerViewTheme.CellTheme.subtitleColorColor of the number of slots available for a day in the time slot picker view.Colors.Text.subdued
TimeSlotPickerViewTheme.CellTheme.subtitleFontFont of the number of slots available for a day in the time slot picker view.Fonts.smallText
TimeSlotPickerViewTheme.CellTheme.indicatorColorTint color used for the expend indicator of the cell for a day in the time slot picker view.Colors.Text.subdued
TimeSlotPickerViewTheme.CellTheme.ButtonTheme.backgroundColorBackground color of a time slot time when not selected.UIColor.clear
TimeSlotPickerViewTheme.CellTheme.ButtonTheme.borderColorBorder color of a time slot time when not selected.Colors.Stroke.subdued
TimeSlotPickerViewTheme.CellTheme.ButtonTheme.textColorText color of a time slot time when not selected.Colors.Text.subdued
TimeSlotPickerViewTheme.CellTheme.ButtonTheme.selectedBackgroundColorBackground color of a time slot time when selected.Colors.Fill.accent
TimeSlotPickerViewTheme.CellTheme.ButtonTheme.selectedBorderColorBackground color of a time slot time when selected.Colors.Stroke.accent
TimeSlotPickerViewTheme.CellTheme.ButtonTheme.selectedTextColorBackground color of a time slot time when selected.Colors.Text.onAccent
TimeSlotPickerViewTheme.CellTheme.ButtonTheme.fontFont of a time slot time.Fonts.caption

AppointmentConfirmationTheme

Theme attributeDescriptionDefault value
AppointmentConfirmationTheme.backgroundColorBackground color for the appointment confirmation view.Colors.Background.underCard
AppointmentConfirmationTheme.headerBackgroundColorBackground color for the appointment confirmation header view.Colors.Fill.card
AppointmentConfirmationTheme.doctorNameColorColor used to display the name of the doctor.Colors.Text.base
AppointmentConfirmationTheme.doctorNameFontFont used to display the name of the doctor.Fonts.subtitleBold
AppointmentConfirmationTheme.doctorDescriptionColorColor used to display details of the doctor.Colors.Text.subdued
AppointmentConfirmationTheme.doctorDescriptionFontFont used to display details of the doctor.Fonts.body
AppointmentConfirmationTheme.disclaimersTextColorColor used to display legal disclaimers of the appointment.Colors.Text.base
AppointmentConfirmationTheme.disclaimersFontFont used to display legal disclaimers of the appointment.Fonts.body
AppointmentConfirmationTheme.captionTintColorColor used for the text of the cell to display appointment time.Colors.Text.accent
AppointmentConfirmationTheme.captionBackgroundColorColor used for background of the cell to display appointment time.Colors.Fill.accentSubdued
AppointmentConfirmationTheme.captionBorderColorColor used for the border of the capsule to display appointment time.Colors.Stroke.accent
AppointmentConfirmationTheme.captionFontFont used for the text of the cell to display appointment time.Colors.Stroke.accent
AppointmentConfirmationTheme.checkboxStyle of the checkbox for legal disclaimers.Checkbox.base
AppointmentConfirmationTheme.buttonStyle of the button to confirm the appointment.Button.accent