Primary color

• Less than a minute to read

This topic dwells on how you can change the primary color of the user interface of the Design Editor. This color is used for the following elements:

• Progress bars
• Popup headers
• Control elements
• Highlight of design elements
• Design element names

To change the primary color, you can pass themeConfiguration with a primaryColor property into the editor.

let editorConfig = {
    themeConfiguration: {
        primaryColor: "#ffa500"
    }
};

To specify a color, pass a string in the CSS format, for example, "#ffa500", "rgba(255,165,0,0.8)", or "orange".

Let's look at how this color will change the user interface.

Item	Default color ("#30C2FF")	New color ("#ffa500")
Progress bar
Popup header
Control elements
Highlight and grips
Design element names

You can also change the color at runtime as follows:

await editor.setThemeConfiguration({
    primaryColor: "rgb(255,165,0)"
});