Search
Loading...
Skip to content

Create a 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.

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.

DesignEditor(settings)
  • 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.
.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),
])

Full Code#

Here’s the full code:

import IMGLYDesignEditor
import SwiftUI


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


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


#Preview {
  ColorPaletteEditorSolution()
}