Theming and Styling

JavaFXSmartGraph uses standard JavaFX CSS for styling its visual components. You can customize the appearance of vertices, edges, labels, and arrows.

By default, the SmartGraphPanel will read the contents of the smartgraph.css stylesheet. You can provide your own styling here.

Bellow is a sample style that produces a glowing effect on the graph and demonstrates the base selectors:

.graph {
    -fx-background-color: black;
    /* you can use -fx-background-image to set a background image */
}

.vertex {
    -fx-fill: #3498db; /* blue fill */
    -fx-stroke: #2980b9; /* darker stroke */
    -fx-stroke-width: 2;
    -fx-effect: dropshadow(gaussian, #00ffff, 15, 0.8, 0, 0);
    -fx-opacity: 0.5;
}

.vertex:hover { /* pseudo-classes also work */
    /*-fx-cursor: default; */ /* You can use this style to override the hand/move cursors while hovering. */
    -fx-stroke-width: 4;
}

.vertex-label {
    -fx-font: bold 8pt "sans-serif";
    -fx-padding: 5px;
    -fx-effect: dropshadow(gaussian, #00ffff, 10, 0.6, 0, 0);
}

.vertex-label:hover {
    /* no style */
}

.edge {
    -fx-stroke: #ffffff; /* white line */
    -fx-stroke-width: 2;
    -fx-effect: dropshadow(gaussian, #00ffff, 10, 0.6, 0, 0);
    -fx-fill: transparent; /* important to keep for curved edges */
    -fx-stroke-line-cap: round;
    -fx-opacity: 0.8;
}

.edge:hover {
    -fx-stroke-width: 3;
}

.edge-label {
    -fx-font: normal 5pt "sans-serif";   
    -fx-effect: dropshadow(gaussian, #00ffff, 10, 0.6, 0, 0);
}

.edge-label:hover {
    -fx-font: bold 5pt "sans-serif";
    -fx-background-radius: 5;
    -fx-border-radius: 5;
}

/* Uses same style as edge, but can be changed here  */
.arrow {
    /* no style */
}

This will produce the following look: