CSS Styling

This demo shows how to style the built-in templates and UI elements of the yFiles for HTML library with CSS to match your color theme.

In this example, we specify the following set of colors in a separate CSS stylesheet. See the sheet for guidance on how to target certain elements of the graph.

CSS styling customized for the following elements

• Viewport rectangle in the Overview
• Highlight when hovering a graph element
• Selection indicator for the graph elements
• Focus indicator for the graph elements
• Marquee selection rectangle
• Resize handles
• Label candidates when dragging a label
• Port candidates
• Tooltips
• Snap-lines
• Scroll-bars
• Label Editor

CSS transitions customized for the following elements

• Node Creation
• Tooltips
• Label editor