Theme Properties

MimiSDK provides a collection of properties that can be themed, which are automatically propogated through to every component of the SDK, provided by MimiTheme.

MimiTheme is a protocol which has a number of properties that it requires to be implemented:

var identifier: String

var colors: MimiUX.MimiColorBook { get }
var fonts: MimiUX.MimiFontBook { get }
var styles: MimiUX.MimiStyleBook { get }

Contents

• General
  • identifier
• MimiColorBook
  • primaryTint
  • secondaryTint
  • tertiaryTint
  • primaryForeground
  • secondaryForeground
  • primaryBackground
  • secondaryBackground
  • elevatedBackground
  • primaryText
  • secondaryText
  • warning
  • error
  • success
  • hearingTestButtonBackground
  • hearingTestButtonText
  • soundPersonalizationIcon
  • leftEar
  • rightEar
• MimiStyleBook
  • statusBar
  • buttonCorner
  • buttonDisplay
  • keyboardAppearance
  • alert
  • uppercaseTransformation
  • textAlignment
• MimiFontBook
  • title
  • action
  • header
  • compactAction
  • body
  • bodyHighlight
  • compactBody
  • compactBodyHighlight
  • caption
  • captionHighlight

General

identifier

A unique identifier for the theme. We suggest you use a similar format to your bundle identifier, with a descriptive trailing component. Something like:

com.company.app.theme.variant

Examples:

com.mimi.hearingtest.theme.light - Light variant
com.mimi.hearingtest.theme.dark - Dark variant

MimiColorBook

MimiColorBook provides a list of colors that can be customized to provide custom tinting to your Mimi experience.

let colorBook: MimiColorBook = .init(primaryTint: .init(color: .red, highlightColor: .green), .secondaryTint: .init(.blue), ...)

primaryTint

Tint color that is used as the primary color for foreground elements such as buttons, switches and other interactive components.

Generally, this color should be the primary color of your brand and is highly prevalent across all UI elements.

secondaryTint

Tint color that is used in conjunction with the primary tint to give contrast.

This color should not clash with your primary tint, but accompany it nicely.

tertiaryTint

Tint color that is applied to mostly background elements, such as the background of an untoggled switch or progress bar.

This color should clearly indicate a background context, and not clash with the other tints as much as possible.

primaryForeground

Color used for primary elements that are typically interactive, such as the title labels within buttons which have a solid background.

This color should contrast nicely with your tint colors to provide a clear sense of interaction.

secondaryForeground

Color used for secondary elements that are typically interactive, and appear on top of elements that are typically using background colors.

This color should contrast nicely with your background colors to provide a clear sense of interaction.

primaryBackground

Color used as the primary background for main views. This is primarily applied to views that take up the whole screen.

Generally, this color should contrast well with your tint colors and also be rather mute and plain.

secondaryBackground

Color used as the secondary background for main views.

This color should contrast well with your tint colors and the primary background.

elevatedBackground

Color used for the background of non-primary views, such as modal views that don’t fill the screen. This includes alert views, navigation bars and tab bars.

This color should be similar to your primary background, but also discernable enough that a sense of context is clear. A user should be able to clearly see they are in a modal with the help of other built-in effects such as overlays and shadows.

primaryText

Text color that is applied to all primary text elements.

This will mostly be applied to labels that are not control elements, and must contrast effectively with your background colors.

secondaryText

Text color that is applied to all secondary / background text elements.

This will mostly be applied to labels that are not control elements, and must contrast effectively with your background colors.

warning

Color that is used to indicate a non-fatal warning or error.

This color can be used in a number of scenarios, such as the background color of an alert banner, or simply as the text color for a label describing an error. Therefore it is expected to be vivid and well contrasting against background elements.

error

Color that is used to indicate a fatal error or failure.

This color can be used in a number of scenarios, such as the background color of an alert banner, or simply as the text color for a label describing an error. Therefore it is expected to be vivid and well contrasting against background elements.

success

Color that is used to indicate a success.

This color can be used in a number of scenarios, such as the background color of an alert banner, or simply as the text color for a label describing a success. Therefore it is expected to be vivid and well contrasting against background elements.

hearingTestButtonBackground

Color used for the hearing test button’s background.

When the button is pressed, the color is also applied to the border of the button.

hearingTestButtonText

Color used for the hearing test button’s text.

The color should be set with its highlighted version which is used for the button’s text when it’s pressed.

soundPersonalizationIcon

Color that is applied to Mimi’s Sound Personalization icon throughout the SDK.

leftEar

Color used for the left ear hearing test results visualization.

rightEar

Color used for the right ear hearing test results visualization.

MimiStyleBook

MimiStyleBook provides a collection of styling properties that can be customized to provide appearance and styling to your Mimi experience. The style book will default to using defaults from the system, and you are able to override as many or as few as desired.

let styleBook: MimiStyleBook = .init(.statusBar(.lightContent))

statusBar

Style of the system status bar

Examples:

.default
.lightContent

buttonCorner

Style of corners to use for large action buttons with a background.

Examples:

.rounded
.square
.eliptical

buttonDisplay

Style of large action button with a background.

Examples:

.fill
.outline

keyboardAppearance

Appearance to use for system keyboard.

Examples:

.default
.light

alert

Type of presenter for alerts. This MimiAlertPresenter conforming type will then be used for presentation of all alerts.

Examples:

UIAlertController.self
MimiAlertController.self

uppercaseTransformation

Set of components whose text should be uppercased. Available options are described by MimiTextUppercaseOptions.

Examples:

.header
[.header, .button]
[.button, .title, .header]

textAlignment

Alignment to apply to text elements that support overriding their alignment.

Examples:

.default
.leading

MimiFontBook

MimiFontBook provides a collection of fonts that can be customized to provide text styles to your Mimi experience. The font book will default to using defaults from the system, and you are able to override as many or as few as desired.

You are also able to create font books for individual user interface idioms.

let styleBook: MimiStyleBook = .init(.title(MimiFont.systemFont(ofSize: 14, weight: .medium)))

title

Font to use for title elements, such as navigation bar titles.

header

Font used for displaying prominent headers for sections of UI.

action

Font to use for large action buttons.

compactAction

Font to use for compact action buttons.

body

Font to use for all body text elements.

bodyHighlight

Font to use for highlighted versions of body text elements, which are typically emboldened.

compactBody

Font to use for all small, compact body text elements.

compactBodyHighlight

Font to use for highlighted versions of small, compact body text elements, which are typically emboldened.

caption

Font used for very compact text elements, such as annotations and captions.

captionHighlight

Font used for highlighted parts of caption text elements.