Theming

This demo shows how to define a custom theme for the graph component by changing the --yfiles-theme CSS variables. A theme affects the color and look of the input handles (e.g. the handles to resize nodes), the marquee, the snap-lines, label position candidates, the graph overview marquee and also the indicators to select, highlight or focus items. The Theming section of the Developers Guide explains the effects of a custom Theme in detail.

The custom theme in this demo uses a round theme variant and a scale of 2 to increase the size of the handles. The primary color is almost white, the secondary color and background color are orange-like.

This is done by setting the following CSS variables:

.yfiles-canvascomponent {
  --yfiles-theme-primary: #fcfdfe;
  --yfiles-theme-secondary: #f69454;
  --yfiles-theme-background: #ee693f;
  --yfiles-theme-variant: round;
  --yfiles-theme-scale: 2;
}        

Things to Try

• Observe the round handles on the preselected node.
• Select, create or move graph elements to see the appearance of the handles and snapping lines.
• Drag a marquee selection and observe that it uses the orange color defined by the custom theme.
• Note that the viewport rectangle of the graph overview component on the bottom right is defined by the color of the custom theme as well.
• Switch between light and dark mode with the toggle theme button. When switching, the coloring of graph items is changed and the background color of the graph component is changed by adding a CSS class.

See the sources for details.