Configure Theming

In this example, we will show you how to make theming configurations for the mobile editor. The example is based on the Design Editor, however, it is exactly the same for all the other solutions.

Explore a full code sample on GitHub.

View on GitHub

Modifiers#

After initializing an editor SwiftUI view you can apply any SwiftUI modifier to customize it like for any other SwiftUI view.

Theming the mobile editor is done like for any other SwiftUI view. The editor respects the SwiftUI colorScheme environment. It can be configured with the preferredColorScheme modifier to override the system's color scheme which is the default if it is not already overridden somewhere in your view hierarchy. In this example, we use the opposite color scheme that is currently used.


import IMGLYDesignEditor
import SwiftUI

private enum CallbackError: Error {
  case noScene
}

struct ThemingEditorSolution: View {
  let settings = EngineSettings(license: secrets.licenseKey,
                                userID: "<your unique user id>")

  @Environment(\.colorScheme) private var colorScheme

  var editor: some View {
    DesignEditor(settings)
      .preferredColorScheme(colorScheme == .dark ? .light : .dark)
  }

  @State private var isPresented = false

  var body: some View {
    Button("Use the Editor") {
      isPresented = true
    }
    .fullScreenCover(isPresented: $isPresented) {
      ModalEditor {
        editor
      }
    }
  }
}