Themes

In yFiles for HTML, CSS themes are used to define the overall look and feel of the interaction visualizations.

The themes use the following three custom CSS properties to define the main colors used in different combinations by the visualizations: --yfiles-theme-primary, --yfiles-theme-secondary, and --yfiles-theme-background.

In the following figure, the primary color (orange) and the background color (dark orange) are used in different combinations for node, edge, and label selection, as well as for the handles. The secondary color (light blue) is used for the marquee rectangle.

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

The --yfiles-theme-variant property determines when and how those colors are used, and also defines the general visualization style. The following theme variants are available:

Available Theme Variants
Theme Variant	Description
`round`	The simple round variant uses a more simplistic styling with round shapes and hairline indicators.
`round-hatched`	The round hatched variant uses a simplistic styling with round shapes and a hatched selection indicator.
`square`	The simple square variant uses a more simplistic styling with rectangular shapes and hairline indicators.
`square-hatched`	The square hatched variant uses a simplistic styling with rectangular shapes and a hatched selection indicator.

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

The theme’s --yfiles-theme-handle-offset property adjusts the reshape handle position independently of the variant. A value of zero centers the handles on the outline, while a positive value moves them outwards, and a negative value moves them inwards.

Reshape handle positions for different offset values

Using a Custom Theme

You can easily use a custom theme by setting the appropriate CSS properties.

Using a custom theme

// set a new Theme using the round variant,and orange and blue colors
graphComponent.htmlElement.style.setProperty(
  '--yfiles-theme-variant',
  'round'
)
graphComponent.htmlElement.style.setProperty(
  '--yfiles-theme-primary',
  '#ff6c00'
)
graphComponent.htmlElement.style.setProperty(
  '--yfiles-theme-secondary',
  '#b5dcee'
)
graphComponent.htmlElement.style.setProperty(
  '--yfiles-theme-background',
  '#662b00'
)

Setting a custom theme results in the following visualization:

customizing view theme custom — Visualization using the custom theme example

You should set a custom theme before using the GraphComponent (for example, immediately after instantiating it).

Effects on Selection

Table Effects of Theme Variants on item selection shows how selected items are visualized, depending on the --yfiles-theme-variant. The example figures use an orange primary color, a light blue secondary color, and a dark orange background color.

Effects of Theme Variants on item selection
Selected Item	`round`	`square`	`round-hatched`, `square-hatched`
INode	A rectangle with a stroke using the `--yfiles-theme-primary`.	A rectangle with a hatched indicator using the `--yfiles-theme-primary` and `--yfiles-theme-background`.

IEdge	Edge path with a stroke using the `--yfiles-theme-primary`.	Edge path with a hatched indicator using the `--yfiles-theme-primary` and `--yfiles-theme-background`.

IBends	Circle filled with `--yfiles-theme-primary`.	Diamond filled with `--yfiles-theme-primary`.	Diamond filled with `--yfiles-theme-primary`.

ILabel	A rectangle with a stroke using the `--yfiles-theme-primary`.	A rectangle with a hatched indicator using the `--yfiles-theme-primary` and `--yfiles-theme-background`.

IPort	A circle filled with the `--yfiles-theme-primary` with a stroke using the `--yfiles-theme-background`.

IStripe	A rectangle with a semi-transparent fill using the `--yfiles-theme-secondary` and a stroke using the `--yfiles-theme-secondary`.

Effects on Focus

The focus visualizations for nodes and edges in the currentItem use a dashed stroke with the --yfiles-theme-primary color.

In the example figures below, the primary color is orange:

Effects on Highlight

Table Effects of ThemeVariants on item highlight shows the visualization used for highlighted items, depending on the --yfiles-theme-variant. In the example figures, an orange primary color, a light blue secondary color, and a dark blue background color are used.

Effects of ThemeVariants on item highlight
Highlighted Item	`round`, `square`	`round-hatched`, `square-hatched`
INode	A rectangle with a stroke using the `--yfiles-theme-secondary`.	A rectangle with a hatched indicator using the `--yfiles-theme-secondary` and `--yfiles-theme-background`.

IEdge	Edge path with a stroke using the `--yfiles-theme-secondary`.	Edge path with a dotted hatched indicator using the `--yfiles-theme-secondary` and `--yfiles-theme-background`.

ILabel	A rectangle with a stroke using the `--yfiles-theme-secondary`.	A rectangle with a hatched indicator using the `--yfiles-theme-secondary` and `--yfiles-theme-background`.

IStripe	A rectangle with a stroke using the `--yfiles-theme-secondary`.	A rectangle with a hatched indicator using the `--yfiles-theme-secondary` and `--yfiles-theme-background`.

Effects on Lasso and Marquee

The visualizations of the current selection region for the LassoSelectionInputMode and MarqueeSelectionInputMode use an outline and a semi-transparent fill. The outline uses the color defined by the CSS variable --yfiles-theme-secondary, and the fill uses a semi-transparent version of the same color.

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 --yfiles-theme-secondary and a half-transparent fill using the --yfiles-theme-secondary color.

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

customizing view theme overview — Overview viewport

Effects on Handles

Table Effects of Theme Variants on handles shows the handle visualization used for each HandleType based on the --yfiles-theme-variant. The example figures use an orange primary color, light blue secondary color, and dark blue background color, with a scale of 4.

Effects of Theme Variants on handles
HandleType	`round`, `round-hatched`	`square`, `square-hatched`
MOVE	A circle filled with the `--yfiles-theme-primary` color and a stroke using the `--yfiles-theme-background` color.	A square filled with the `--yfiles-theme-primary` color and a stroke using the `--yfiles-theme-background` color.

MOVE2	A square filled with the `--yfiles-theme-primary` color and a stroke using the `--yfiles-theme-background` color.	A circle filled with the `--yfiles-theme-primary` color and a stroke using the `--yfiles-theme-background` color.

MOVE3	A square filled with the `--yfiles-theme-background` color and a stroke using the `--yfiles-theme-primary` color.	A circle filled with the `--yfiles-theme-background` color and a stroke using the `--yfiles-theme-primary` color.

RESIZE, RESIZE_TOP_LEFT, RESIZE_TOP, RESIZE_TOP_RIGHT, RESIZE_LEFT, RESIZE_RIGHT, RESIZE_BOTTOM_LEFT, RESIZE_BOTTOM, RESIZE_BOTTOM_RIGHT	A circle filled with the `--yfiles-theme-background` color and a stroke using the `--yfiles-theme-primary` color.	A square filled with the `--yfiles-theme-background` color and a stroke using the `--yfiles-theme-primary` color.

CUSTOM1	A circle filled with the `--yfiles-theme-background` color and a stroke using the `--yfiles-theme-primary` color.

CUSTOM2	A square filled with the `--yfiles-theme-background` color and a stroke using the `--yfiles-theme-primary` color.

CUSTOM3	A double-circle filled with the `--yfiles-theme-primary` color and a stroke using the `--yfiles-theme-background` color.

CUSTOM4	A double-square filled with the `--yfiles-theme-primary` color and a stroke using the `--yfiles-theme-background` color.

CUSTOM5	A double-circle filled with the `--yfiles-theme-background` color and a stroke using the `--yfiles-theme-primary` color.

CUSTOM6	A double-square filled with the `--yfiles-theme-background` color and a stroke using the `--yfiles-theme-primary` color.

VOID, INVISIBLE	No visualization

Effects on Label Candidates

When dragging an ILabel to a different location provided by its ILabelModel using the MoveInputMode, the possible label location candidates are visualized. For the candidate that would currently be chosen, the visualization depends on the chosen visualization of the LabelPositionHandler in use. The default is PLACEHOLDER, which uses a preview of the label style. When GHOST is set, the theme colors come into play.

Table Effects of Theme Variants on Label Candidates shows how label candidates are visualized depending on the --yfiles-theme-variant. The example figures use an orange primary color, light blue secondary color, and dark blue background color.

Effects of Theme Variants on Label Candidates
Label Candidate	`round`, `round-hatched`	`square`, `square-hatched`
Non-highlighted Candidate	A rectangle with rounded corners and a stroke using the `--yfiles-theme-secondary` color.	A rectangle with a stroke using the `--yfiles-theme-secondary` color.

Highlighted GHOST Candidate	A rectangle with rounded corners and a stroke using the `--yfiles-theme-primary` color.	A rectangle with a stroke using the `--yfiles-theme-primary` color.

Effects on Port Candidates

When you create new edges or reconnect existing ones, the valid and invalid IPortCandidate are visualized, and the candidate that would currently be chosen is highlighted.

Table Effects of Theme Variants on Port Candidates shows how port candidates are visualized depending on the --yfiles-theme-variant. Highlighted port candidates use the same visualization as non-highlighted candidates but are increased in size. The example figures use an orange primary color, a light blue secondary color, and a dark blue background color.

Port Candidate Validity	`round`, `round-hatched`	`square`, `square-hatched`
VALID: Highlighted (left) and non-highlighted (right)	A green circle with a stroke using the `--yfiles-theme-background`.	A green square with a stroke using the `--yfiles-theme-background`.
VALID: Highlighted (left) and non-highlighted (right)
INVALID: Highlighted (left) and non-highlighted (right)	A gray circle with a stroke using the `--yfiles-theme-background`.	A gray square with a stroke using the `--yfiles-theme-background`.
INVALID: Highlighted (left) and non-highlighted (right)