Template Styles ​

Graphly D3 brings a number of css styles out of the box to style the templates and shapes. This does also work well with the native light and dark mode.

Dark mode ​

The dark mode of Graphly D3 is applied if the containing <svg> element has the class dark.

<svg class="dark">...</svg>

Utilities ​

Graphly D3 also provides a few utility classes that can be handy when styling the template.

• .gly_animated gives the element an transition proeprty to animate the style changes
• .noselect prevents the element from being selected
• .hidden sets the element opacity to 0

Texts ​

The .gly_text class applies a consistent style to all text elements. It can also be paired with the classes:

• .light for light text
• .dark for dark text
• .white for white text
• .black for black text

The special behavior of .light and .dark is that they are swapped if the dark mode is applied while .white and .black stay consistent.

Color Palette ​

Graphly D3 also provides ten different colors in multiple shades to use in your templates. Each base color also has corrosponding classes for fill and stroke – .gly_<color>_fill and .gly_<color>_stroke. Those classes can be paired with .lighten and .darken to access the light and dark shades of the color.