Skip to main content

For developers: Swift

Chameleon is a collection of reusable tools and components that are divided into multiple packages. They can be used together or separately depending on your team’s needs.

OverviewWebSwiftKotlin

chameleon-swift-tokens

swift-version xcode-version

For our design system, Chameleon, we've created an implementation specifically for Swift to make it easy for you to create beautiful and polished user interfaces. Whether you're using SwiftUI or UIKit, our design system provides you with all the colors, fonts, and other atoms you need to bring your UI to life.

Tip: swift demo.

The goal is to enable you to build an app that can efficiently switch its theme context, going beyond changing between light and dark color schemes, and allowing you to theme different parts of your screen. You can subtheme everything, and even load subthemes dynamically, for example, for A/B testing.

More info on how to use it with SwiftUI using ready-made components in chameleon-swift-components. Here, we illustrate how to use the tokens in both multi-themed and single-themed apps. We describe the process of loading dynamic themes in a separate section.

App​

  1. Add Swift Package dependency latest tag https://gitlab.mediahuisgroup.com/frontend/chameleon-swift or branch
  2. Add both Chameleon and ChameleonTheme<#theme#> libraries to your target
  3. Do an import ChameleonTheme<#theme#> in code that is specific for your target

Single theme app setup​

SwiftUI​

import Chameleon
import ChameleonThemeWl
import SwiftUI

@main
struct DemoSingleThemeApp: App {
  init() {
    ChameleonThemeWl.bootstrapFontFamilies()
  }

  var body: some Scene {
    WindowGroup {
      ContentView()
      .environment(\.tc, ChameleonThemeWl.tc)
    }
  }
}

AppDelegate with or without SceneDelegate​

It is the same just make sure you call ChameleonThemeWl.bootstrapFontFamilies() in the application(_:didFinishLaunchingWithOptions:) method.

import UIKit
import ChameleonThemeWl

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

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

}

Multi theme app setup​

A multi theme app setup is available (for non production apps). The app startup is slower due to pre-loading the themes on initialization of the app. The loading of the themes needs to have happened before the app starts.

import Chameleon
import ChameleonAll
import SwiftUI

@main
struct DemoComponentsApp: App {
  init() {
    ChameleonAll.bootstrapFontFamilies()
  }

  var body: some Scene {
    WindowGroup {
      ContentView()
          .environment(\.tc, bootstrap(theme: .wl))
    }
  }
}

References​

Documentation​

Full documentation website & xcode docs for detailed documentation using swift-docc

Extra info​

Add Libraries to target​

Swift package chameleon-swift

Add dependency via:

In both cases use url: git@gitlab.mediahuisgroup.com:frontend/chameleon-swift

References​