To change the colors of the designer, the most efficient way is to apply your own styles from an external CSS file, however, a quick way is to go through the plugin to define the colors of the different elements of the designer.

To define the theme, you just have to add the object containing its configuration directly to the default options when the plugin is initialized :

var options = {
	theme : {...}
}

var instance = new AsukaDesigner('#myId');

Here is an example configuration which will define all the possible styles, you can omit the properties that you don’t need to change :

{
	canvas: 'transparent',
	primary: '#1c3355',
	secondary: '#f0f0f0',
	color: '#16232E',
	block: '#ffffff',
	container: '#f7f7f7',
	button: '#f0f0f0',
	form: '#f0f0f0',
	component: '#ffffff',
}

Thanks to the API, you can also modify the colors of the designer after its initialization :

var instance = new AsukaDesigner('#myId');

instance.layout().setColor('canvas', 'purple');
instance.layout().setColor('menu', {
	color: 'orange',
	background: 'red',
});

// Ugly theming right here