Styles and Themes

Appearance of items can be customized using Style objects assigned to respective style property of DiagramItem. The attributes from a style are applied only when item's own corresponding properties do not contain values.

Style objects can also be collected into a Theme and applied as a set to the whole diagram by assigning it to the theme property. The library includes nine stock themes listed below, accessible via respective static methods of the Theme class.

Blue	Business	Earth
Gray	Green	Light
Pastel	Peach	Standard

Creating and applying a custom theme looks like this:

JavaScript

var theme = new Theme();

var shapeNodeStyle = new Style();
shapeNodeStyle.brush = { type: 'LinearGradientBrush', color1: '#e0e9e9', color2: '#9caac6', angle: 90 };
shapeNodeStyle.stroke = "#7F7F7F";
shapeNodeStyle.textColor = "#585A5C";
shapeNodeStyle.fontName = "Verdana";
shapeNodeStyle.fontSize = 3;
theme.styles.set("std:ShapeNode", shapeNodeStyle);

var linkStyle = new Style();
linkStyle.stroke = "#7F7F7F";
linkStyle.textColor = "#585A5C";
linkStyle.fontName = "Verdana";
linkStyle.fontSize = 3;
theme.styles.set("std:DiagramLink", linkStyle);

var tableStyle = new Style();
tableStyle.brush = { type: 'LinearGradientBrush', color1: '#FCFCFC', color2: '#9DABB4', angle: 90 };
tableStyle.stroke = "#7F7F7F";
tableStyle.textColor = "#585A5C";
tableStyle.fontName = "Verdana";
tableStyle.fontSize = 3;
theme.styles.set("std:TableNode", tableStyle);

diagram.theme = theme;