Applying a Theme

MimiSDK has a powerful theming engine built in to every UI component, designed to provide all the flexibility you need to make Mimi feel at home in your app. We provide the ability to customize colours, fonts, layout and system elements and more.

Contents

• What Can I Theme?
• Create a Theme
• Theme Variants
• Apply a Theme

What Can I Theme?

Take a look at the Theme Properties for an overview of all theme properties in MimiTheme.

Create a Theme

A theme is just an object with a number of appearance properties that are categorized into ‘books’, and can easily be created by creating an object that conforms to MimiTheme.

import MimiSDK
import MimiUXKit

struct CustomTheme: MimiTheme {

    let identifier: String = "com.mimi.theme.custom"

    let colors: MimiColorBook = .default
    let fonts: MimiFontBook = .default
    let styles: MimiStyleBook = .default
}

Theme Variants

MimiTheme is built to support multiple variants of a theme, allowing you to create configurations that differ in certain (or all) properties.

This is particularly useful for example if you wanted to have a light and dark theme:

struct CustomTheme: MimiTheme {

    static let light = CustomTheme(colors: .init(primaryTint: .init(color: .white, highlightColor: .white), ...))
    static let dark = CustomTheme(colors: .init(primaryTint: .init(color: .black, highlightColor: .black), ...))

    static var variants: [CustomTheme] = [.light, .dark]
}

variants is a required property of MimiTheme - so if you don’t have the need for multiple variants do the following:

struct CustomTheme: MimiTheme {

    static let `default` = CustomTheme()

    static var variants: [CustomTheme] = [.default]
}

Note: Theming is handled by MimiUXKit so must be imported.

Supporting Dark Mode

With iOS 13, Apple added dedicated dark / light modes to the operating system. This can also be supported in a MimiTheme by providing a variant for each user interface style.

struct CustomTheme: MimiTheme {

    static let light = CustomTheme()
    static let dark = CustomTheme()

    static var variants: [CustomTheme] = [.light, .dark]

    @available(iOS 13, *)
    func variantForUserInterfaceStyle(_ style: UIUserInterfaceStyle) -> CustomTheme? {
        switch style {
        case .dark:
            return .dark
        case .light:
            return .light
        default:
            return nil
        }
    }
}

Apply a Theme

Once a theme has been defined, it can be applied at any time - allowing you to support any requirements for dynamic appearance updates.

It’s as simple as one line:

CustomTheme.default.apply()