Skip to main content

iOS - Access Theme Fonts

note

Modules that inherit from Q2ModuleBase or directly conform to the Module interface receive moduleDataSource, which exposes the active ThemeProvider.

Quick Start​

Follow these three steps in any module:

  1. Access moduleDataSource.
  2. Request a font using theme?.font(withSize:).
  3. Apply .uiFont to your UI element.
Quick Start Example
let titleFont = moduleDataSource?.theme?.font(withSize: 18).uiFont
let bodyFont = moduleDataSource?.theme?.font(withSize: 14).uiFont

titleLabel.font = titleFont
bodyLabel.font = bodyFont

Implementation​

Q2ModuleBase already provides moduleDataSource, so you can use theme fonts directly.

Q2ModuleBase Example
import Q2ModuleInterfaces
import UIKit

final class PartnerUIModule: Q2ModuleBase {
    private let titleLabel = UILabel()
    private let subtitleLabel = UILabel()

    override func didOpen(_ identifier: String) {
        titleLabel.font = moduleDataSource?.theme?.font(withSize: 18).uiFont
        subtitleLabel.font = moduleDataSource?.theme?.font(withSize: 14).uiFont
    }
}

SwiftUI Usage​

If your module UI is built with SwiftUI, request the theme font the same way and bridge it to SwiftUI Font.

SwiftUI Example
import Q2ModuleInterfaces
import SwiftUI

struct PartnerView: View {
    let moduleDataSource: ModuleDataSource?

    var body: some View {
        if let uiFont = moduleDataSource?.theme?.font(withSize: 16).uiFont {
            Text("Account Summary")
                .font(Font(uiFont))
        } else {
            Text("Account Summary")
        }
    }
}

Guidance​

  • Use theme fonts for all user-facing text to stay visually consistent with Q2MobileApp.
  • Pick font sizes based on your component hierarchy (title, body, helper text).
  • Reuse the same withSize values across similar screens for consistency.