Configure Color Palette

In this example, we will show you how to make color palette 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. All public Swift extensions of existing types provided by IMG.LY, e.g., for the SwiftUI View protocol or for the CGColor class, are exposed in a separate .imgly property namespace. The color palette configuration to customize the editor is no exception to this rule and is implemented as a SwiftUI modifier.

colorPalette - the color palette used for UI elements that contain predefined color options, e.g., for "Fill Color" or "Stroke Color". It expects an array of NamedColors that are composed of a name, required for accessibility, and the actual CGColor to use. It should contain seven elements. Six of them are always shown. The seventh is only shown when a color property does not support a disabled state. This example shows the default configuration.


import IMGLYDesignEditor
import SwiftUI

private enum CallbackError: Error {
  case noScene
}

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

  @Environment(\.colorScheme) private var colorScheme

  var editor: some View {
    DesignEditor(settings)
      .imgly.colorPalette([
        .init("Blue", .imgly.blue),
        .init("Green", .imgly.green),
        .init("Yellow", .imgly.yellow),
        .init("Red", .imgly.red),
        .init("Black", .imgly.black),
        .init("White", .imgly.white),
        .init("Gray", .imgly.gray),
      ])
  }

  @State private var isPresented = false

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