Guides
Start typing to search…

Customizing Themes

Override the StreamLayer iOS SDK's default colors and fonts to match your app's branding.

The StreamLayer iOS SDK includes a built-in theme that you can override to match your app's branding. You can change fonts and color styles, and the SDK will apply the appropriate appearance across all units — including authorization and profile screens.

Register Custom Fonts

Register font files and apply them to specific weights:

// Registering a font file
UIFont {
  static func register(from url: URL)
}

// Set custom fonts to sdk
UIFont {
  static func applyToTheme(fontName: String, weight: UIFont.Weight)
}

Set the Color Theme

Use the appStyle property to switch between built-in color schemes:

// theme change
public protocol StreamLayerConfig {
  ....
  var appStyle: SLRStyle { get set }
  ....
}

Full Example

Apply font and theme customizations in your AppDelegate:

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication .LaunchOptionsKey: Any]?
  ) -> Bool {

  enum BentonFont: String, CaseIterable {
    case black = "BentonSans Black"
    case bold = "BentonSans Bold"
    case book = "BentonSans Book"
    case medium = "BentonSans Medium"
    case regular = "BentonSans Regular"
  }

  // register font files
  let fonts = BentonFont.allCases
  let urls = fonts.compactMap({ Bundle.main.url(forResource: $0.rawValue, withExtension: "otf") })
  urls.forEach({ try? UIFont.register(from: $0) })

  // define custom fonts to system
  UIFont.applyToTheme(fontName: BentonFont.regular.rawValue, weight: .regular)
  UIFont.applyToTheme(fontName: BentonFont.book.rawValue, weight: .light)
  UIFont.applyToTheme(fontName: BentonFont.medium.rawValue, weight: .medium)
  UIFont.applyToTheme(fontName: BentonFont.medium.rawValue, weight: .semibold)
  UIFont.applyToTheme(fontName: BentonFont.bold.rawValue, weight: .bold)
  UIFont.applyToTheme(fontName: BentonFont.black.rawValue, weight: .heavy)

  // apply theme for colors/styles
  StreamLayer.config.appStyle = .green

Related

Updated 15 days ago