Customizing Themes

The StreamLayer iOS SDK has a theme that can be overridden to customize the look and feel of your integration. When you define a style you can change the colors and appearance to match the colors for your brand. You can customize the Main overlay, Authorization overlay, Profile overlay, and Watch Party overlay and the SDK will apply the appropriate style based on which overlay is on screen.

Please note, these all variables / attributes are being referenced in Swift.

Updating Base Fonts

// 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)
}

Updating Theme

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

Applying these Customizations

In order to apply these changes, you will need to define the customization in your 'AppDelegate.swift' file as follows:

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