Themes

In yFiles for HTML a Theme is used to define the general look and feel of its interaction visualization.

The theme contains a primaryColor, a secondaryColor, and a backgroundColor that are used in different combinations by the visualizations.

In the following figure the primary color (orange) is used by node selection and handle stroke, the secondary color (light blue) is used by the snapline and the background color (dark blue) is used as handle fill.

customizing view theme colors — A theme with orange primary color, dark orange background color, and light blue secondary color.

When and how those colors are used is determined by the variant that also defines the general visualization style. The following ThemeVariants are available:

Available ThemeVariants
ThemeVariant	Description
SIMPLE_ROUND	The simple round variant uses a more simplistic styling with round shapes where applicable and hairline indicators.
SIMPLE_SQUARE	The simple square variant uses a more simplistic styling with rectangular shapes where applicable and hairline indicators.
CLASSIC	The classic variant uses the well-known styling of previous yFiles for HTML versions. Since this styling doesn’t fit into the set of options provide by the Theme class, only some features can be colored in this variant. For example, snap lines do not use the secondaryColor but a hardcoded blue stroke. This can still be adjusted by CSS or by the related resource keys.

The theme’s scale property is independent of the variant and is used as a factor to scale the size of IHandles and IPortCandidates.

Using a Custom Theme

A custom theme can easily be used by assigning a new instance to the theme property:

Using a custom theme

// set a new Theme using the round variant,and orange and blue colors
graphComponent.theme = new Theme('simple-round', '#ff6c00', '#b5dcee', '#662b00')

Setting this custom theme results in the following visualization:

customizing view theme custom — Visualization using the custom theme example

A custom theme should be set before usage (e.g. immediately at or shortly after instantiating the GraphComponent).

Effects on Selection

Table Effects of ThemeVariants on item selection shows which visualization of selected items is used depending on the ThemeVariant. An orange primary, light blue secondary and dark blue background color is used in the example figures.

Effects of ThemeVariants on item selection
Selected Item	SIMPLE_ROUND	SIMPLE_SQUARE	CLASSIC
INode	A rectangle with a stroke using the primaryColor.	A rectangle with a hatched indicator using the primaryColor and backgroundColor.

IEdge	Edge path with a stroke using the primaryColor.	Edge path with a hatched indicator using the primaryColor and backgroundColor.

IBends	Circle filled with backgroundColor.	Diamond filled with backgroundColor with a stroke in primaryColor.	Diamond filled with backgroundColor with a stroke in primaryColor.

ILabel	A rectangle with a stroke using the primaryColor.	A rectangle with a hatched indicator using the primaryColor and backgroundColor.

IPort	A circle filled with the primaryColor with a stroke using the backgroundColor.

IStripe	A rectangle with a semi-transparent fill using the secondaryColor and a stroke using the secondaryColor.	A rectangle with a semi-transparent black fill and a black stroke.

Effects on Focus

The focus visualizations of the currentItem for nodes and edges use a dashed stroke using the primaryColor.

An orange primary color is used in the example figures below:

Effects on Highlight

Table Effects of ThemeVariants on item highlight shows which visualization of highlighted items is used depending on the ThemeVariant. An orange primary, light blue secondary and dark blue background color is used in the example figures.

Effects of ThemeVariants on item highlight
Highlighted Item	SIMPLE_ROUND	SIMPLE_SQUARE	CLASSIC
INode	A rectangle with a stroke using the secondaryColor.	A rectangle with a double-stroked border using the primaryColor with the backgroundColor in-between or just the corners of this rectangle depending on the zoom level.

IEdge	Edge path with a stroke using the secondaryColor.	Edge path with a dotted hatched indicator using the primaryColor and backgroundColor.

ILabel	A rectangle with a stroke using the secondaryColor.	A rectangle with a hatched indicator using the primaryColor and backgroundColor.

IStripe	A rectangle with a stroke using the secondaryColor.	A rectangle with a double-stroked border using the primaryColor with the backgroundColor in-between or just the corners of this rectangle depending on the zoom level.

Effects on Lasso and Marquee

The visualizations of the current region of the LassoSelectionInputMode and MarqueeSelectionInputMode edges use an outline in secondaryColor and a half-transparent fill using the secondaryColor.

A light-blue primary color is used in the example figures below:

Effects on Overview

The visualizations of the viewport of the GraphOverviewComponent use an outline in secondaryColor and a half-transparent fill using the secondaryColor.

A light-blue primary color is used in the example figure below:

customizing view theme overview — Overview viewport

Effects on Handles

Table Effects of ThemeVariants on handles shows which handle visualization is used for each Variant type depending on the ThemeVariant. An orange primary, light blue secondary and dark blue background color is used in the example figures.

Effects of ThemeVariants on handles
Handle Item	SIMPLE_ROUND	SIMPLE_SQUARE	CLASSIC
RESIZE with VARIANT1	Circle with fill using the backgroundColor and a stroke using the primaryColor.	Square with fill using the backgroundColor and a stroke using the primaryColor.	Square with fill using the primaryColor and a stroke using the backgroundColor.

Other handle types with VARIANT1	A fill using the primaryColor and a stroke using the backgroundColor.

Handles with VARIANT2	A fill using the backgroundColor and a stroke using the primaryColor.

Handles with VARIANT3	A dark-gray fill and a light-gray stroke.

Handles with VARIANT4	A light-gray fill and a dark-gray stroke.

Effects on Label Candidates

When dragging an ILabel to a different location provided by its ILabelModel using the MoveLabelInputMode, the possible label location candidates are visualized and the one that would currently be chosen is highlighted.

Table Effects of ThemeVariants on Label Candidates shows how label candidates are visualized depending on the ThemeVariant. An orange primary, light blue secondary and dark blue background color is used in the example figures.

Effects of ThemeVariants on Label Candidates
Label Candidate	SIMPLE_ROUND	SIMPLE_SQUARE	CLASSIC
Non-highlighted Candidate	A rectangle with rounded corners with a stroke using the secondaryColor.	A rectangle with a stroke using the secondaryColor.	A rectangle with a light-gray stroke.

Highlighted Candidate	A rectangle with rounded corners with a stroke using the primaryColor.	A rectangle with a stroke using the primaryColor.	A rectangle with a dark-gray stroke.

Effects on Port Candidates

When creating new edges or reconnecting existing ones the valid and invalid IPortCandidate are visualized and the one that would currently be chosen is highlighted.

Table Effects of ThemeVariants on Port Candidates shows how port candidates are visualized depending on the ThemeVariant. Highlighted port candidates use the same visualization as not highlighted candidates, but are increased in size. An orange primary, light blue secondary and dark blue background color is used in the example figures.

Effects of ThemeVariants on Port Candidates
Port Candidate Validity	SIMPLE_ROUND	SIMPLE_SQUARE	CLASSIC
VALID: Highlighted (left) and not highlighted (right)	A green circle with a stroke using the backgroundColor.	A green square with a stroke using the backgroundColor.	A green rectangle with a stroke using the backgroundColor and additional corners using the primaryColor.

INVALID: Highlighted (left) and not highlighted (right)	A gray circle with a stroke using the backgroundColor.	A gray square with a stroke using the backgroundColor.	A red rectangle with a stroke using the backgroundColor and additional corners using the primaryColor.

Effects on Snap Lines

The Snapping feature supports easy alignment of moved or resized graph items. When an item is snapped, the SnapResult is visualized using one or several Snap Lines that indicate, where the item is aligned.

These snap lines use a blue color (CLASSIC) respectively the secondaryColor (SIMPLE_ROUND and SIMPLE_SQUARE) and additional crosses are added at important locations when CLASSIC is used.

An orange primary, light blue secondary and dark blue background color is used in the example figures.

When snapping to Grid points, those Grid points are visualized with plus signs that use a green color (CLASSIC) respectively the secondaryColor (SIMPLE_ROUND and SIMPLE_SQUARE)