Theming

This demo shows how to define a custom Theme for the graph component. 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 ThemeVariant 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 demo also shows how to implement a simple switch between a light and dark application mode. The styles of the graph items are not affected by the theme. If you want to adapt the visualization of the graph items to the selected theme, then you can do that as shown here when switching between light and dark mode.

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 background color of the graph overview component on the top left is defined by the color of the custom theme as well.
Switch between light and dark mode by using the toolbar buttons. Note that the theme is not affected by the mode. When switching, the coloring of graph items is changed and the background color of the graph component is changed by adding a CSS class. Of course, in real-world applications, more elements could change appearance via CSS.

See the sources for details.