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.
Updated 18 days ago