📘
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 attribute	Description	Default value
`AppointmentListViewTheme.backgroundColor`	Color used for the background of the appointment list view.	Colors.Background.underCard
`AppointmentListViewTheme.emptyViewTextColor`	Color used for the text of the empty state where no appointments are scheduled.	Colors.Text.base
`AppointmentListViewTheme.emptyViewFont`	Font used for the text of the empty state where no appointments are scheduled.	Fonts.caption
`AppointmentListViewTheme.button`	Style of the button used to schedule a new appointment.	Button.accent
`AppointmentListViewTheme.CellTheme.backgroundColor`	Color used for the background of an appointment cell.	Colors.Fill.card
`AppointmentListViewTheme.CellTheme.titleColor`	Color used for the name of the doctor of an upcoming appointment.	Colors.Text.base
`AppointmentListViewTheme.CellTheme.titleDisabledColor`	Color used for the name of the doctor of a past appointment.	Colors.Text.subdued
`AppointmentListViewTheme.CellTheme.titleFont`	Font used for the name of the doctor of an appointment.	Fonts.subtitleBold
`AppointmentListViewTheme.CellTheme.subtitleColor`	Color used for the time of an upcoming appointment.	Colors.Text.subdued
`AppointmentListViewTheme.CellTheme.subtitleDisabledColor`	Color used for the time of a past appointment.	Colors.Text.subdued
`AppointmentListViewTheme.CellTheme.subtitleFont`	Font used for the time of an appointment.	Fonts.body
`AppointmentListViewTheme.CellTheme.moreButtonColor`	Color of the button to edit an upcoming appointment.	Colors.Text.subdued
`AppointmentListViewTheme.CellTheme.button`	Style of the button to join an appointment via video call.	Button.accentSubdued
`AppointmentListViewTheme.CellTheme.cornerRadius`	Corner radius used for the background of an appointment cell.	14

AppointmentDetailsTheme

Theme attribute	Description	Default value
`AppointmentConfirmationTheme.backgroundColor`	Background color for the appointment confirmation view.	Colors.Background.underCard
`AppointmentConfirmationTheme.header`	Theme for the details card at the top of the screen.	AppointmentDetailsViewTheme.base
`AppointmentConfirmationTheme.cancelButton`	Style of the button to cancel the appointment.	Button.danger

LocationPickerViewTheme

Theme attribute	Description	Default value
`LocationPickerViewTheme.backgroundColor`	Background color for the location picker view.	Colors.Background.underCard
`CategoryPickerViewTheme.emptyViewTextColor`	Color of the text displayed when there are no locations available.	Colors.Text.base
`LocationPickerViewTheme.emptyViewFont`	Font of the text displayed when there are no locations available.	Fonts.caption
`LocationPickerViewTheme.CellTheme.backgroundColor`	Color of the background of the cell of a location.	Colors.Fill.card
`CategoryPickerViewTheme.CellTheme.textColor`	Color of the text displayed with the name of a location.	Colors.Text.base
`LocationPickerViewTheme.CellTheme.font`	Font of the text displayed with the name of a location.	Fonts.subtitleMedium
`CategoryPickerViewTheme.CellTheme.iconColor`	Color of the text displayed with the name of a location.	Colors.Text.base
`LocationPickerViewTheme.CellTheme.indicatorColor`	Tint color used for the tap indicator of the cell of a location.	Colors.Text.base
`LocationPickerViewTheme.CellTheme.cornerRadius`	Corner radius used for the background of the cell of a location.	12

CategoryPickerViewTheme

Theme attribute	Description	Default value
`CategoryPickerViewTheme.backgroundColor`	Background color for the category picker view.	Colors.Background.underCard
`CategoryPickerViewTheme.preselectedLocationDisclaimerTextColor`	Color of the text displayed when the user did not select a location because there is only one available.	Colors.Text.base
`CategoryPickerViewTheme.preselectedLocationDisclaimerFont`	Font of the text displayed when the user did not select a location because there is only one available.	Fonts.caption
`CategoryPickerViewTheme.emptyViewTextColor`	Color of the text displayed when there are no categories available.	Colors.Text.base
`CategoryPickerViewTheme.emptyViewFont`	Font of the text displayed when there are no categories available.	Fonts.caption
`CategoryPickerViewTheme.CellTheme.backgroundColor`	Color of the background of the cell of a category.	Colors.Fill.card
`CategoryPickerViewTheme.CellTheme.textColor`	Color of the text displayed with the name of a category.	Colors.Text.base
`CategoryPickerViewTheme.CellTheme.font`	Font of the text displayed with the name of a category.	Fonts.subtitleMedium
`CategoryPickerViewTheme.CellTheme.indicatorColor`	Tint color used for the tap indicator of the cell of a category.	Colors.Text.base
`CategoryPickerViewTheme.CellTheme.cornerRadius`	Corner radius used for the background of the cell of a category.	12

TimeSlotPickerViewTheme

Theme attribute	Description	Default value
`TimeSlotPickerViewTheme.backgroundColor`	Background color for the time slot picker view.	Colors.Background.underCard
`TimeSlotPickerViewTheme.button`	Theme used for the button to continue in the time slot picker view.	Button.accent
`TimeSlotPickerViewTheme.CellTheme.backgroundColor`	Color of the background of the cell for a day in the time slot picker view.	Colors.Fill.card
`TimeSlotPickerViewTheme.CellTheme.titleColor`	Color of the date of a day in the time slot picker view.	Colors.Text.base
`TimeSlotPickerViewTheme.CellTheme.titleFont`	Font of the date of a day in the time slot picker view.	Fonts.subtitleMedium
`TimeSlotPickerViewTheme.CellTheme.subtitleColor`	Color of the number of slots available for a day in the time slot picker view.	Colors.Text.subdued
`TimeSlotPickerViewTheme.CellTheme.subtitleFont`	Font of the number of slots available for a day in the time slot picker view.	Fonts.smallText
`TimeSlotPickerViewTheme.CellTheme.indicatorColor`	Tint color used for the expend indicator of the cell for a day in the time slot picker view.	Colors.Text.subdued
`TimeSlotPickerViewTheme.CellTheme.cornerRadius`	Corner radius of the cell for a day in the time slot picker view.	8
`TimeSlotPickerViewTheme.CellTheme.ButtonTheme.backgroundColor`	Background color of a time slot time when not selected.	UIColor.clear
`TimeSlotPickerViewTheme.CellTheme.ButtonTheme.borderColor`	Border color of a time slot time when not selected.	Colors.Stroke.subdued
`TimeSlotPickerViewTheme.CellTheme.ButtonTheme.textColor`	Text color of a time slot time when not selected.	Colors.Text.subdued
`TimeSlotPickerViewTheme.CellTheme.ButtonTheme.selectedBackgroundColor`	Background color of a time slot time when selected.	Colors.Fill.accent
`TimeSlotPickerViewTheme.CellTheme.ButtonTheme.selectedBorderColor`	Background color of a time slot time when selected.	Colors.Stroke.accent
`TimeSlotPickerViewTheme.CellTheme.ButtonTheme.selectedTextColor`	Background color of a time slot time when selected.	Colors.Text.onAccent
`TimeSlotPickerViewTheme.CellTheme.ButtonTheme.font`	Font of a time slot time.	Fonts.caption
`TimeSlotPickerViewTheme.CellTheme.ButtonTheme.cornerRadius`	Corner radius of the time slot buttons.	8
`TimeSlotPickerViewTheme.CellTheme.ButtonTheme.insets`	Insets of the time slot buttons.	.all(6)

AppointmentConfirmationTheme

Theme attribute	Description	Default value
`AppointmentConfirmationTheme.backgroundColor`	Background color for the appointment confirmation view.	Colors.Background.underCard
`AppointmentConfirmationTheme.header`	Theme for the details card at the top of the screen.	AppointmentDetailsViewTheme.base
`AppointmentDetailsView.Theme.disclaimersTextColor`	Color used to display legal disclaimers of the appointment.	Colors.Text.base
`AppointmentDetailsView.Theme.disclaimersFont`	Font used to display legal disclaimers of the appointment.	Fonts.body
`AppointmentConfirmationTheme.checkbox`	Style of the checkbox for legal disclaimers.	Checkbox.base
`AppointmentConfirmationTheme.confirmButton`	Style of the button to confirm the appointment.	Button.accent

SuccessTheme

Theme attribute	Description	Default value
`SuccessTheme.backgroundColor`	Background color for the view.	Colors.Background.base
`SuccessTheme.imageColor`	Color for the image.	Colors.Text.subdued
`SuccessTheme.messageColor`	Color for the message.	Colors.Test.subdued
`SuccessTheme.messageFont`	Font for the message.	Fonts.subtitleMedium
`SuccessTheme.button`	Theme for the button.	Button.accent

AppointmentDetailsView.Theme (shared component)

Theme attribute	Description	Default value
`AppointmentDetailsView.Theme.backgroundColor`	Background color for the view.	Colors.Fill.card
`AppointmentDetailsView.Theme.cornerRadius`	Corner radius for the view.	12
`AppointmentDetailsView.Theme.doctorNameColor`	Color used to display the name of the doctor.	Colors.Text.base
`AppointmentDetailsView.Theme.doctorNameFont`	Font used to display the name of the doctor.	Fonts.subtitleBold
`AppointmentDetailsView.Theme.doctorDescriptionColor`	Color used to display details of the doctor.	Colors.Text.subdued
`AppointmentDetailsView.Theme.doctorDescriptionFont`	Font used to display details of the doctor.	Fonts.body
`AppointmentDetailsView.Theme.separatorColor`	Color used to display the separator between the doctor and the appointment details.	Colors.Stroke.subdued
`AppointmentDetailsView.Theme.accessoriesTheme`	Theme used for each element of the appointment details.	base

AppointmentDetailsAccessoryView.Theme (shared component)

Theme attribute	Description	Default value
`AppointmentDetailsAccessoryView.Theme.imageColor`	Color used to draw the icon.	Colors.Text.accent
`AppointmentDetailsAccessoryView.Theme.titleColor`	Color used for the first text in the view.	Colors.Text.accent
`AppointmentDetailsAccessoryView.Theme.titleFont`	Font used for the first text in the view.	Fonts.bodyMedium
`AppointmentDetailsAccessoryView.Theme.subtitleColor`	Color used for the second text in the view.	Colors.Text.subdued
`AppointmentDetailsAccessoryView.Theme.subtitleFont`	Font used for the second text in the view.	Fonts.smallMedium
`AppointmentDetailsAccessoryView.Theme.extraColor`	Color used for the third text in the view.	Colors.Text.subdued
`AppointmentDetailsAccessoryView.Theme.extraFont`	Font used for the third text in the view.	Fonts.smallText