Skip to content

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.

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


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


#Preview {
  ThemingEditorSolution()
}