Color Management

This feature allows developers to configure and control the color options available in the builder, ensuring brand consistency and flexibility for end-users. By using this API, you can now define custom color groups, set default color groups, and disable existing color options to suit your specific needs. This flexibility ensures that end-users have access to the right color schemes for their design needs, including support for custom color groups like dark mode.

Key Features

• Custom Color Groups: Create and define custom color categories beyond the default “Common Colors” and “Brand Colors.”
• Default Color Group: Set a default color group in the color picker dropdown for ease of use.
• Disabling Color Groups: Disable specific built-in color groups, such as “Template Colors,” if they are not needed.

You can change the default color presets for the color picker.

unlayer.init({
  features: {
    colorPicker: {
      presets: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#DCE775']
    }
  }
})

Custom Color Groups

You can define any custom color group, giving you the flexibility to add categories that suit your application.

unlayer.init({
  features: {
    colorPicker: {
      colors: [
        {
          id: "dark_colors",
          label: "Dark Mode",
          colors: ["#000", "#333", "#666"],
        },
      ],
    },
  },
});

In this example, a custom color group labeled “Dark Mode” with specific colors is added to the color picker.

Setting Default Color Group

You can now specify which color group should be set as the default in the color picker dropdown by using the default: true flag.

unlayer.init({
  features: {
    colorPicker: {
      colors: [
        {
          id: "brand_colors",
          colors: ["pink"],
          default: true,
        },
      ],
    },
  },
});

Here, the “Brand Colors" group is set as the default color group.

Disable Existing Color Groups

You can also disable any of the existing color groups, such as “Template Colors”, by passing an empty array for the group’s colors.

unlayer.init({
  features: {
    colorPicker: {
      colors: [
        {
          id: "template_colors",
          colors: [],  // Disables the Template Colors group
        },
      ],
    },
  },
});

This example disables the “Template Colors” group by setting its colors array to empty.

Overriding Existing Color Groups

To override default color groups like “Common Colors” or “Brand Colors”, use the following structure:

unlayer.init({
  features: {
    colorPicker: {
      colors: [
        {
          id: "common_colors",  // Override Common Colors
          colors: ["blue"],
        },
        {
          id: "brand_colors",  // Override Brand Colors
          colors: ["pink"],
          default: true,
        },
      ],
    },
  },
});

Here, the “Common Colors” group is overridden with a single color (“blue”), and the “Brand Colors” group is overridden with “pink” and set as the default.

Updating Color Picker Configuration on the Fly

In addition to setting the configuration during initialization, you can update the color picker settings dynamically using the unlayer.setColorPickerConfig() method.

unlayer.setColorPickerConfig({
  colors: [
    {
      id: "light_colors",
      label: "Light Mode",
      colors: ["#FFF", "#EEE", "#CCC"],
    },
  ],
});

This allows you to modify the color picker configuration after initialization, providing flexibility to change settings based on user interactions or preferences.

FAQ

Can I completely remove the default color groups?
Yes, you can disable any default color group (e.g., “Template Colors”) by passing an empty array for that group’s colors.

How do I add multiple custom color groups?
You can define multiple custom color groups by adding multiple objects within the colors array, each with a unique id and label.

Can I dynamically update the color picker settings?
Yes, you can use unlayer.setColorPickerConfig() to update the color picker settings at any point after initialization.

By using the color management API, developers can fully customize the color options available in the builder, ensuring flexibility and branding control for their end-users.